I have a list of items with icons that need to change when clicked. The issue I am facing is that all icons are changing at once because they share the same v-model. How can I modify my code so that only the icon being clicked changes? Here is my current implementation:
<v-list-item v-for="(item, index) in itemSubtasks" :key="index">
<v-list-item-action style="padding-top: 20px;">
<v-icon v-show="showDoneSub" @click="clickSubtask"> mdi-circle-outline
</v-icon>
<v-icon v-show="showUnDoneSub" @click="unDoneSubtask">
mdi-checkbox-marked-circle-outline </v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<v-text-field v-model="item.title"></v-text-field>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
Here is how the items are defined:
itemSubtasks: [{
title: 'My custom subtask 1',
},
{
title: 'My custom subtask 2',
},
],
showDoneSub: true, //empty circle
showUnDoneSub: false, //circle checked
And these are the methods in use:
clickSubtask() {
this.showDoneSub = false
this.showUnDoneSub = true
},
unDoneSubtask() {
this.showDoneSub = true
this.showUnDoneSub = false
},