相关疑难解决方法(0)

我在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;
        }
      }
    }); …