i have a v-for loop as my selection for dialog boxes I want to open
<v-card @click="page.model = true">
page.model is my v-model for a v-dialog
data() {
return {
dialog1: false,
dialog2: false,
pages: [
{
id: "1",
model: "dialog1",
},
{
id: "2",
model: "dialog2",
},
],
};
},
howcome @click="page.model = true" doesn't work but @click=dialog1 = true " does?
I also tried :@click="page.model = true" and @click="${page.model} = true"
Thank you in advance
So we dont see your modal HTML so I presume something like this:
<v-card v-for="page in pages" @click="changePage(page.id)">
<modal v-model="pages[0].isOpen">[CONTAIN OF PAGE 1]</modal>
<modal v-model="pages[1].isOpen">[CONTAIN OF PAGE 2]</modal>
data() {
return {
pages: [
{
id: "1",
model: "dialog1",
isOpen: false,
},
{
id: "2",
model: "dialog2",
isOpen: false,
},
],
},
methods: {
changePage(id) {
// close all other modal page
this.pages.each(el => el.isOpen = false);
// open the good one
const index = this.pages.findIndex(el => el.id == id);
this.pages[index].isOpen = true;
}
},
I have done something similar. Call a method and pass index of item. In the method you can then access the specific model via index
<v-card @click="updateDialog(index)">
updateDialog(i): {
this.pages[i].model = true
}