Vue.js开发ToDoList时点击删除按钮无法移除待办项的问题

核心问题定位 #

• 方法未注册到Vue实例：原代码中deleteItem写在Vue实例的根层级，和data、methods配置项平级，没有被包裹进methods对象内部。Vue只会将methods对象内的方法挂载到组件可调用的上下文，模板绑定的点击事件无法找到deleteItem函数，点击时不会触发任何删除逻辑。
• 删除逻辑参数不匹配：原代码给删除按钮传递的参数是自定义的item.id，但数组splice()方法的第一个参数需要接收元素在数组中的真实索引位置，而非自定义对象属性。且原代码的id生成逻辑绑定this.items.length + 1，一旦删除中间条目，剩余条目的id就会和数组索引错位，即便方法注册正确，也会出现删错条目、无法命中目标条目的问题。

配套规范类问题 #

• 循环渲染的v-for未绑定唯一:key属性，会导致Vue渲染跟踪DOM状态出现异常，影响渲染性能
• 循环生成的删除按钮使用了id="deleteBtn"，会让页面中出现多个同id的DOM元素，不符合HTML规范，应替换为class绑定样式
• CSS中body { background: whiteGhost; }使用了不存在的颜色值，背景无法正常渲染

修复后可运行的代码片段 #

调整后的JS逻辑 #

new Vue({
  el: "#app",
  data: {
    newItem: "Hello Vue.js!",
    items: [],
    nextItemId: 1 // 独立维护自增id，避免和数组长度绑定导致的id错位
  },
  methods: {
    addItem: function() {
      this.items.push({
        id: this.nextItemId++,
        name: this.newItem,
        completed: false
      })
      this.newItem = '';
    },
    toggleCompleted: function(item) {
      item.completed = !item.completed;
    },
    // 将deleteItem移入methods作用域，确保被Vue实例注册
    deleteItem: function(targetIndex) {
      // 用真实数组索引执行删除操作
      this.items.splice(targetIndex, 1);
    }
  }
})

调整后的HTML模板 #

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
  <h1>ToDo-list</h1>
  <h3>Organize your tasks!</h3>
  <input v-model="newItem" placeholder="I have to..."> 
  <button @click="addItem" :disabled="newItem.length === 0">Add</button><br>
  <!-- 循环时获取数组索引，为每个项绑定唯一key -->
  <div v-for="(item, index) in items" :key="item.id">
    <p :class="{completed : item.completed}" @click="toggleCompleted(item)">{{ item.name }}</p> 
    <!-- 替换id为class，传递索引作为删除参数 -->
    <button class="deleteBtn" @click="deleteItem(index)"> X</button>
  </div>
</div>

对应修改的CSS片段 #

/* 其余原有样式保持不变，仅调整选择器匹配类名 */
.deleteBtn {
  border: solid rgb(168, 24, 24) 1px;
  border-radius: 50px;
  background: fireBrick;
  color: #2c3e50;
  font-family: Avenir;
  padding: 1px 5px 0 5px;
}

.deleteBtn,
p {
  display: inline;
}

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