踩坑！关于v-for和splice连用导致index错乱无法删除当前项的解决方案

当我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标。

平时绑定key值的时候，都习惯采用如下写法，直接绑定下标: key="index" v-for="(item,index) in list"

但是因为key值绑定的是index，删除元素会导致顺序错乱问题，并不会像期望的那样，点击哪一项就会删除哪一项

这里通俗的解释下：

下标在这是个临时身份，它的默认位置不会变化，如果你里面的item项移动了，那么移动的数据对应到index上，所以你的index对应的那个项就不是你想要的那个项了

所以本质上 :key=index 它们是同一个inedx 在不变化的前提下，一旦发生变化了，就不再是我们期望的那样了

所以这也是官方不推荐使用:key="index"的原因，如果业务发生变化，你的代码就出问题了

我们改造下代码，其他地方都可以不变，只需修改对于的key值即可，建议绑定每一项中唯一且不变的值，比如id

具体参见如下代码：

通过map方法循环遍历找出当前id所对应的index值便可成功删除当前项（代码中的data是从子组件拿到的id）