使用 vuetify 仅更改 v-list-item 中的第一个图标

Question

我有一个项目列表，每个项目之前都是一个图标。单击它时，我想将图标从空圆圈更改为选中的圆圈。但是当我单击第一个图标时，所有图标都被检查，因为它们具有相同的 v-model。当我单击第一个图标时，我怎样才能做到这一点，只是第一个图标发生变化？ 这就是我所拥有的：

    <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>

声明如下：

    itemSubtasks: [{
        title: 'My custom subtask 1',
      },
      {
        title: 'My custom subtask 2',
      },
    ],
    showDoneSub: true,   //empty circle
    showUnDoneSub: false,   //circle checked 

这些是方法：

  clickSubtask() {
    this.showDoneSub = false
    this.showUnDoneSub = true
  },
  unDoneSubtask() {
    this.showDoneSub = true
    this.showUnDoneSub = false
  },

Answer 1

定义一个名为currentDoneIndex 的属性，然后使用点击图标索引进行更新：

     <v-icon v-if="currentDoneIndex!==index" @click="clickSubtask(index)"> mdi-circle-outline
          </v-icon>
    <v-icon v-ele @click="unDoneSubtask(index)">
                mdi-checkbox-marked-circle-outline </v-icon>

在数据对象中：

 currentDoneIndex:-1

在方法中：

 clickSubtask(index) {
   this.currentDoneIndex = this.currentDoneIndex===index?-1:index
  },
  unDoneSubtask() {
     this.currentDoneIndex==-1
  },