Vue.js中点击删除数组指定项时splice仅删最后一项如何解决？

核心问题是v-for循环使用数组下标作为key值导致DOM渲染异常。

Vue在更新列表DOM时，会通过key值复用已有节点。当你删除数组中指定下标的元素后，后续所有元素的下标都会自动前移1位，此时下标与原有任务的对应关系失效。Vue会判定原下标最大的元素被移除，因此视觉上表现为删除最后一项，但实际上数组内的数据删除逻辑是正确的，只是DOM渲染匹配错误。

• 第一步：为每个任务对象添加唯一标识ID，可在新增任务时用时间戳生成

addItem() {
    this.taskArr.push({
        id: Date.now(), // 新增唯一ID字段
        name: 'Empty task',
        status: 'Undone'
    })
}

• 第二步：修改v-for的key绑定为任务自身的唯一ID，不再使用数组下标

<div class="task-list" 
     v-for="(task, idx) in taskArr"
     :key="task.id">

修改完成后无需改动deleteItem的原有逻辑，删除操作即可正常匹配对应任务项。

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