[Vuejs]-Vue2 modal in v-for list

1👍

✅

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 {

        }
    }
});

1👍

There are 2 things:

You don’t reference item in the data object instead you should reference it as a prop for the component props: ['item'].
The modal is not inside the loop’s scope, which ends at the closing </tr> tag. You could change this so that the click action performs a method that takes the item and assigns it to a variable that is always passed in like a prop. This would be similar to how you are doing it now, you would just change showModal = true to openModal(item) then have a method that would set the appropriate 2 values. Something like this:
```
openModal(item) {
  this.showModal = true;
  this.modalItem = item;
}

...

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