tengo un bucle v-for como mi selección para los cuadros de diálogo que quiero abrir
<v-card @click="page.model = true">page.model es mi modelo v para un diálogo v
data() { return { dialog1: false, dialog2: false, pages: [ { id: "1", model: "dialog1", }, { id: "2", model: "dialog2", }, ], }; }, ¿Cómo es que @click="page.model = true" no funciona pero @click=dialog1 = true " sí? También probé :@click="page.model = true" y @click=" ${page.model} = verdadero"
Gracias de antemano
Entonces no vemos su HTML modal, así que supongo algo como esto:
<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; } },He hecho algo similar. Llame a un método y pase el índice del elemento. En el método, puede acceder al modelo específico a través del índice
<v-card @click="updateDialog(index)"> updateDialog(i): { this.pages[i].model = true }