Vue Todo应用删除指定元素异常：总是删除数组首个元素

核心问题 #

你的删除功能出错主要有两个原因：

• v-for的key无效且参数传递错误：你给v-for绑定的key是todo.id，但初始数据和新增的todo都没有id字段，Vue无法正确跟踪列表项；同时删除按钮调用deleteTodo(key)时，key变量根本没在v-for中声明，导致传递的参数无效，最终splice错误删除第一个元素。
• filter方法使用错误：filter不会修改原数组，而是返回新数组，你之前只调用filter却没把新数组赋值回todolist，所以元素没被删除。

修复步骤 #

1. 给Todo项添加唯一ID

修改数据初始化和addTodo方法，给每个todo生成唯一标识：

data: function () {
  return {
    todolist: [{id: 1, task: 'do something', done: false}],
    taskinput: '',
    hideTasks: true,
    taskValid: true,
    nextId: 2 // 用于生成下一个唯一ID
  }
},
methods: {
  addTodo: function () {
    if (this.taskinput.length !== 0) {
      this.todolist.push({ 
        id: this.nextId++,
        task: this.taskinput, 
        done: false 
      });
      this.taskinput = '';
      this.taskValid = true;
    }
    else {
      this.taskValid = false;
    }
  },
  // ...其他方法
}

2. 修正v-for和删除按钮参数

在v-for中声明正确的变量，删除按钮传递有效参数：

<li v-for="(todo, index) in todolist" v-bind:key="todo.id" >
  <ul :class="todo.done ? 'done' : 'notdone'">
    <input type="checkbox" v-model="todo.done" />
    {{ todo.task }}
    <!-- 两种可选方式：传递索引或todo的ID -->
    <button @click="deleteTodo(index)">Delete</button>
    <!-- 更推荐用ID：<button @click="deleteTodoById(todo.id)">Delete</button> -->
  </ul>
</li>

3. 修正删除方法

如果用索引删除，确保参数正确即可；如果想用filter，需要将返回的新数组赋值回todolist：

// 按索引删除（修正后可用）
deleteTodo: function(index) {
  this.todolist.splice(index, 1);
},
// 按ID删除（更可靠，避免索引错位问题）
deleteTodoById: function(todoId) {
  this.todolist = this.todolist.filter(todo => todo.id !== todoId);
}

关键注意点 #

• 列表渲染的key必须是每个项的唯一标识，用ID是最佳实践，不要用索引（除非列表不会排序、过滤）。
• 使用filter删除时，必须把返回的新数组重新赋值给原数组，否则原数组不会变化。

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