Vue3中v-for的index变量异常，导致删除元素失效问题排查

核心问题 #

你混淆了数组的循环索引index和元素的唯一标识id。虽然初始状态下页面显示index等于cartItem.id，但这只是巧合——数组索引会随元素增删动态变化，而cartItem.id是固定不变的，直接用index调用splice会在删除元素后出现定位错误。

解决方法 #

不要依赖循环的index来删除元素，改用元素的id定位真实索引：

1. 修改删除方法：

removeFromItems(itemId) {
  // 通过id找到元素在数组中的真实索引
  const targetIndex = this.cartItems.findIndex(item => item.id === itemId)
  if (targetIndex !== -1) {
    this.cartItems.splice(targetIndex, 1)
  }
}

2. 调用方法时传递元素id而非index：

<tr v-for="(cartItem, index) in cartItems" :key="cartItem.id">
  <!-- 其他内容 -->
  <td><button @click="removeFromItems(cartItem.id)">删除</button></td>
</tr>

为什么原方法失效？ #

• 初始状态下数组索引和元素id可能刚好匹配（比如id为连续的0、1、2），此时用index删除能正常工作。
• 但删除任意元素后，数组会重新排序，后续元素的索引会前移，这时候再用之前的id值当作index去删除，会定位到错误的元素，甚至找不到有效索引。
• Vue中v-for使用cartItem.id作为key是正确的做法，但这和数组的循环index没有绑定关系，index仅表示当前元素在数组中的临时位置。

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