Question

我有一个父母和两个孩子。第一个孩子是产品卡，第二个孩子是模式窗口。我想点击卡片将真实值发送给模态并显示它。这是我的App.vue组件的模板：

<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默认为假：

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

我要实现它：

open_modal() {
      this.modal_open = true
    }

在组件中接收它：

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

并显示一个模式窗口：

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

但是我的代码不起作用。

Answer 1

您应该使用@click.native="doSomthg()"

Answer 2

您的代码似乎旨在同时显示多个模态。通常这不是您想要的。

在这种情况下，我通常会这样做：

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

在方法中：

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

模态称为：

<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>

模态本身根本不需要处理显示，父级可以使用v-if来处理。

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

请参阅工作代码沙箱：https://codesandbox.io/s/2019-11-11deputates-z125f?from-embed

请注意@ click-handler和：key =“ modal_deputy.id”上的.native修饰符，而不是：key =“ deputy.id”。

Vue：将click事件绑定到一个组件，将值发送给另一个组件

2 个答案: