具有Vue的多个模态组件

Question

我在Vue中实现动态模态组件时遇到问题.

我显示从db获取的一组数据的常用方法是通过迭代db结果的每一行来转储HTML表元素中的每一行.像这样的东西:

正如您在屏幕截图中看到的,每个行都有一个或多个按钮,这些按钮由循环动态生成.为了将模态组件绑定到每个按钮(比如这个场景中的Remove按钮),我会做这样的事情.
HTML:

<div id="app">
    <?php foreach($result as $x): ?>
        <modal v-if="showModal">I am Modal $x</modal>
        <btn @trigger="onShowModal">Button $x</btn>
    <?php endforeach; ?>
</div>

因此,如果我的结果中有三行,前面提到的代码块将采用以下形式:

<div id="app">
        <modal v-if="showModal">I am Modal 1</modal>
        <btn @trigger="onShowModal">Button 1</btn>

        <modal v-if="showModal">I am Modal 2</modal>
        <btn @trigger="onShowModal">Button 2</btn>

        <modal v-if="showModal">I am Modal 3</modal>
        <btn @trigger="onShowModal">Button 3</btn>
</div>

这是我在JavaScript端做的事情:

JavaScript的:

    Vue.component('btn',{
      template: `<button @click="$emit('trigger')"><slot></slot></button>`,
    });

    Vue.component('modal',{
      template: `<p><slot></slot></p>`,
    });

    new Vue({
      el: '#app',
      data: {
        showModal: false
      },
      methods: {
        onShowModal(){
          this.showModal = true;
        }
      }
    });

这种方法的问题是,当我单击任何一个删除按钮时,我得到一个模块的"堆栈"而不是我想要查看的模态.那是因为我设置showModal到true,如果你看到填充HTML块,你会看到,每个模态的设置为v-if="showModal".

点击这里观看演示

当我开始理解前端 - 后端关系时,我发现这种模式在应用程序中更频繁地出现.如何解决此问题(具有非常适合初学者的级别)？

Answer 1

根本问题是您showModal在所有模态组件上引用相同的数据属性.

您可以创建另一个组件来封装按钮和模态组件对.这样showModal,每个modal和btn对都有一个单独的数据属性:

Vue.component('btn',{
  template: `<button @click="$emit('trigger')"><slot></slot></button>`,
});

Vue.component('modal',{
  template: `<p><slot></slot></p>`,
});

Vue.component('modal-btn', {
  template: `
    <div>
      <modal v-if="showModal">
        <slot>I am a modal</slot>
      </modal>
      <btn @trigger="showModal = true">Show Modal</btn>
    </div>
  `,
  data() {
    return { showModal: false }
  }
});

new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    onShowModal(){
      this.showModal = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <modal-btn></modal-btn>
  <modal-btn>I am another modal</modal-btn>
  <modal-btn>I'm a third modal</modal-btn>
</div>