vue.js列表删除异常：删除笑话条目时总会误删目标项前一条

问题核心原因 #

• 删除按钮与列表条目完全错位：删除按钮单独编写了独立的v-for循环，和每条笑话的DOM没有绑定关系；且按钮自身的循环只声明了joke变量没有提取索引，点击时传入的index是未定义/完全错位的值，直接导致splice操作的索引和预期不符
• 渲染数据源与操作数据源不匹配：页面渲染遍历的是viewJoke，删除操作却修改setList，两者数据不同步；如果viewJoke本身是用于展示单条详情的对象而非列表数组，遍历对象拿到的索引是属性键名，和列表数组的实际索引完全不对应，直接引发删除错位
• 删除逻辑冗余错误：splice执行后直接将viewJoke设为空对象，会直接清空整个渲染列表，不符合单条删除的预期
• key使用不当：直接用数组索引作为v-for的key，在列表增删场景下容易出现DOM复用错位，进一步放大索引不匹配的问题
• 调试代码错误：console.log(this.setList.splice)是直接打印splice方法本身，不是执行删除后的数组结果，无法起到调试作用

修正方案 #

1. 调整HTML渲染逻辑 #

把删除按钮移入每条笑话的循环内部，确保按钮索引和当前展示条目一一对应，直接用存储全量笑话的setList作为渲染源，避免数据不同步：

<!-- 遍历全量数据数组，每个条目内部绑定对应删除按钮 -->
<div 
  class="col list-group-item" 
  v-for="(item, index) in setList" 
  :key="item.uniqueId ?? index"
>
    <div class="col">Joke: {{item.joke}} </div>
    <div class="col">Punchline: {{item.punchline}}</div>
    <div class="col">Category: {{item.category}}</div>
    <button 
      type="button" 
      class="btn btn-dark"
      @click="delJoke(index)"
    >删除</button>
</div>

2. 修正删除方法逻辑 #

移除多余的清空操作，确保仅删除对应索引的单条数据，同时修正调试代码：

delJoke(index) {
  // 对统一的数据源执行删除操作
  this.setList.splice(index, 1);
  // 如需调试打印删除后的列表，不要直接打印splice方法本身
  console.log('删除后的列表：', this.setList);
}

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