使用Vuetify实现点击v-list-item图标时仅切换当前对应项图标

核心原因是你把选中状态放在了全局变量，所有列表项共用同一个状态，所以会同步切换。你需要把完成状态绑定到每个子任务对象本身即可。

1. 修改状态定义 #

删掉全局的showDoneSub和showUnDoneSub变量，给每个子任务项增加done字段标识当前项是否完成：

itemSubtasks: [{
    title: 'My custom subtask 1',
    done: false // 新增字段，默认未完成
  },
  {
    title: 'My custom subtask 2',
    done: false
  },
],

2. 修改模板代码 #

把图标显示条件绑定到当前遍历项的done属性，点击事件传入当前项作为参数：

<v-list-item v-for="(item, index) in itemSubtasks" :key="index">
  <v-list-item-action style="padding-top: 20px;">
    <!-- 未完成时显示空心圆圈 -->
    <v-icon v-show="!item.done" @click="clickSubtask(item)"> 
      mdi-circle-outline
    </v-icon>
    <!-- 已完成时显示勾选圆圈 -->
    <v-icon v-show="item.done" @click="unDoneSubtask(item)">
      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>

3. 修改点击处理方法 #

修改方法直接操作传入的当前项的done属性：

clickSubtask(item) {
  item.done = true
},
unDoneSubtask(item) {
  item.done = false
},

优化方案（可选） #

你可以把两个点击方法合并为一个，减少冗余代码：
模板简化为：

<v-icon @click="toggleSubtask(item)">
  {{ item.done ? 'mdi-checkbox-marked-circle-outline' : 'mdi-circle-outline' }}
</v-icon>

方法简化为：

toggleSubtask(item) {
  item.done = !item.done
}

内容的提问来源于stack exchange，提问作者Nina