vue操作数组更新子组件数据的问题

Question

问题：动态遍历的子组件，修改子组件的状态，当在父组件操作数组时候，子组件被重新渲染，数据上一次保存的数据丢失了。
如图：
删除子组件的第一个，想要保留其余的组件数据状态，

想要的效果：

实际上的效果：

我本来想在子组件使用$emit保存数据到父组件的数组，也不行，求解。

demo地址：
https://jsbin.com/bikuval/edit?html,js,output

Answer 1

那几个按钮轮流点击了几次，页面就卡住了，尝试不了。你先修复下Bug。

Answer 2

这种错误很常见，你在使用 v-for 指令遍历产生子组件时，使用了索引作为 key。

这会导致 Vue 在做 DOM Diff 的时候无法正确的识别新旧节点之间的关系，于是就会直接重新渲染，导致以前的数据丢失。

无论何时，最好都给遍历出来的每个根元素一个唯一的 key（无需全局唯一，保证单次循环中唯一即可）。

<div :key="one.id" v-for="(one, index) in boxList">
    <button @click="del(index)">删除组件{{index}}</button>
    <com-test @set="setBox" :index="index" :data="one"></com-test>
</div>

现在，例子就可以正常工作了。