Vue2 modal in v-for list

I’m trying to implement a vue2 modal as described in the vue docs at https://v2.vuejs.org/v2/examples/modal.html.

It looks something like this:

<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: ''
        }
    }
});

While the button shows up and does pop up the modal, I get a warning that 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., and when I inspect the modal component in the Vue dev tools, the item is still '', it’s not populated by the :item binding.

What’s the right way to pass the item object into the modal so we can use it in the window?

Answer

If you’re passing item as a value from the parent to a child component, you cannot use data–you must use props instead!

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

        }
    }
});

Advertisement

Answer