Question

我正在尝试按照https://vuejs.org/v2/examples/modal.html的vue文档中的说明实现vue2 modal。

它看起来像这样：

<tbody v-if="fields.length">
    <tr v-for="(item, index) in fields">
        <td>@{{ item.name }}</td>
        <td><input type="checkbox" id="checkbox" v-model="item.active"></td>
        <td>
            <button id="show-modal" @click="showModal = true">Show Modal</button>
        </td>
    </tr>
    <modal :item="item" v-if="showModal" @close="showModal = false">
        <h3 slot="header">Hello World</h3>
    </modal>
</tbody>


Vue.component('modal', {
    template: '#modal-template',
    data: function() {
        return {
            item: ''
        }
    }
});

当按钮显示并弹出模态时，我收到Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.的警告，当我检查Vue开发工具中的modal组件时，item是仍然是''，它没有被:item绑定填充。

将item对象传递给模态的正确方法是什么，以便我们可以在窗口中使用它？

Answer 1

如果您将item作为父项的值传递给子组件，则无法使用data - 您必须改为使用props！

Vue.component('modal', {
    template: '#modal-template',
    props: ['item'],
    data: function() {
        return {

        }
    }
});

Answer 2

有两件事：

您没有引用数据对象中的项目，而应将其引用为组件props: ['item']的道具。
模态不在循环范围内，该范围以结束</tr>标记结束。您可以更改此设置，以便单击操作执行一个方法，该方法接受项目并将其分配给始终像prop一样传入的变量。这与您现在的操作方式类似，您只需将showModal = true更改为openModal(item)，然后设置一个可设置相应2值的方法。像这样：
```
openModal(item) {
  this.showModal = true;
  this.modalItem = item;
}

...

data: () => {
  modalItem: null
  ...
}
```

v-for模式中的Vue2模态

2 个答案: