Vue: bind click event to one component, send value to another

Question

I have a parent and two child components. The first child is a product card, the second one is a modal window. I want clicking to card send true value to modal and show it. Here is a template from my App.vue component:

<template>
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <h2 v-text="region"></h2>
      <div class="deputates">
        <deputy
          class="deputy"
          v-for="deputy in deputates_in_regions(region)"
          :key="deputy.id"
          :deputy="deputy"
          @click="open_modal"
        ></deputy>
      </div>
    </div>
    <modal
      class="modal"
      v-for="deputy in deputates"
      :key="deputy.id"
      :deputy="deputy"
      :modal_open="modal_open"
    ></modal>
  </div>
</template>

open_modal is false by default:

export default {
  name: "app",
  data () {
    return {
      modal_open: false

I want to make it true:

open_modal() {
      this.modal_open = true
    }

Recieve it in component:

export default {
    name: "modal",
    props: {
        deputy: Object,
        modal_open: {
            type: Boolean,
            required: true
        }
    }

And show a modal window:

<template>
    <div class="modal" v-show="modal_open">
        <p>{{ deputy.modal }}</p>
    </div>
</template>

But my code doesn't work.

score 0 · Answer 1 · answered Nov 04 '19 at 14:31

0

You should use @click.native="doSomthg()"

answered Nov 04 '19 at 14:31

Sabri Korkmaz

77
11

Katinka Hesselink · Accepted Answer · 2019-11-11T16:09:37.460

0

Your code looks like you are aiming to show several modals at the same time. That's usually not what you want.

In such cases I usually do something like this:

export default {
  name: "app",
  data () {
    return {
      modal_open: false,
      modal_deputy: null,
  }
}

In methods:

open_modal(deputy) {
  this.modal_open = true;
  this.modal_deputy = deputy
}

The modal called:

<deputy
  class="deputy"
  v-for="deputy in deputates_in_regions(region)"
  :key="deputy.id"
  :deputy="deputy"
  @click="open_modal(debuty)"
></deputy>

<modal
  class="modal"
  :key="deputy.id"
  :deputy="modal_deputy"
  v-if="modal_open"
></modal>

The modal itself doesn't need to handle being shown at all, the parent can handle that with the v-if.

<template>
    <div class="modal">
        <p>{{ deputy.whateverYouWantToShow }}</p>
    </div>
</template>

See working code sandbox: https://codesandbox.io/s/2019-11-11deputates-z125f?from-embed

Note the .native modifier on the @click-handler & the :key="modal_deputy.id" instead of :key="deputy.id".

edited Nov 11 '19 at 16:09

answered Nov 04 '19 at 14:58

Katinka Hesselink

3,961
4
20
26

Thank you! It's exactly what I want. I tried to implement your code but for some reason it doesn't work. Could you take a look and say what did I do wrong? https://codesandbox.io/s/vue-template-zjc6x?fontsize=14 – Anton Nov 11 '19 at 14:19
Your modal is still within the v-for loop, so you have several instances of it prepared. Move it outside the loop. – Katinka Hesselink Nov 11 '19 at 14:24
I moved it outside the loop but nothing has changed – Anton Nov 11 '19 at 14:44
The on-click handler isn't working at all. Add a console.log in there and make sure it works first. See: https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component – Katinka Hesselink Nov 11 '19 at 16:01
I updated the answer to reflect the working fiddle I made from yours. Good luck. – Katinka Hesselink Nov 11 '19 at 16:10

Vue: bind click event to one component, send value to another

2 Answers2