javascript - v-for 列表中的 Vue2 模态

Question

我正在尝试实现一个 vue2 modal如 vue 文档中所述 https://v2.vuejs.org/v2/examples/modal.html .

它看起来像这样:

<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. ，当我检查modal时Vue 开发工具中的组件，item仍然是'' ，它没有由 :item 填充绑定(bind)。

通过item的正确方法是什么？对象放入模态中以便我们可以在窗口中使用它？

Answer 1

如果您将 item 作为值从父组件传递给子组件，则不能使用 data - 必须使用 props 相反!

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

        }
    }
});