Vue.js中Object数组splice异常：仅删除末尾元素问题

这个问题我之前也碰到过，核心原因是v-for没有绑定唯一的key属性，导致Vue的DOM复用逻辑出了问题，让你误以为splice(index,1)只对末尾元素生效。

问题根源 #

Vue在更新v-for渲染的列表时，默认采用「就地复用」的策略。如果不给每个列表项指定唯一的key，当数组元素发生变化时，Vue会通过索引来匹配新旧DOM节点。比如你删除索引为1的元素，Vue会认为只是最后一个节点需要被移除，因为它会把后续元素的索引往前移，复用之前的DOM结构，最终表现出来的就是只有末尾元素被删掉了。

修复方案 #

只需要在v-for循环的<tr>标签上绑定唯一的key即可，这里我们可以用每个row对象的id（因为你在添加行时已经生成了唯一的id值）：

修改后的HTML代码：

<div id="app">
  <table>
    <tr>
      <td><input type="text" name="test1" /></td>
      <td>
        <button class="btn" @click="addrow">add row</button>
      </td>
    </tr>
    <tr v-for="(row,index) in rows" :key="row.id">
      <td><input type="text" name="test2" /></td>
      <td>
        <button class="btn" @click="removerows(index)">remove </button>
      </td>
    </tr>
  </table>
</div>

为什么这样有效？ #

key的作用是让Vue能够准确识别每个列表项的身份，当数组发生变化时，它会基于key的变化重新排列元素顺序，而不是简单地复用索引对应的DOM节点。你的addrow方法里已经通过counterrow给每个row生成了唯一且稳定的id，这个值完美符合key的要求——唯一且不会随意变更。

修改之后，再调用removerows(index)方法时，splice(index,1)就能精准定位到你想要删除的元素，不管它在数组的哪个位置都能正常删除了。

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