3๐
โ
If you are loading from file you can try like this:
<div v-for="(animal, index) in animals" :key="index">
<div>{{ animal.name }}</div> // Dog
<div>{{ animal.showModal }}</div> // false
<div @click="showModal(index)">Show modal</div>
<div v-if="isItemClicked(index)">modal...</div>
</div>
In your data initialize indexes: []
and go and see if your index in that array.
methods: {
showModal(index) {
this.indexes.push(index);
},
isItemClicked(index) {
let test = false;
this.indexes.forEach(i => {
if (i === index) {
test = true;
break;
}
})
return test;
}
}
If you need to change data in your json you will need other procedure.
I think it was helpful. Good luck.
๐คmare96
0๐
Tempalte:
<div @click="showModal(animal)">Show modal</div>
.
Method:
showModal(animal) {
animal.showModal = true;
}
๐คAndrew Vasylchuk
Source:stackexchange.com