Vue移除子组件及其状态

Question

我想删除子组件。我使用this.rows.splice(索引，1)

当我调用this.rows.splice(index，1)时，VueJ总是从这个.$children中删除最后一个组件，并将内部状态保存在component.$data；

示例如下

`https://jsfiddle.net/abratko/gc7h1r34/3/`

如何修复它？

Answer 1

默认情况下，Vue根据每个数据项的索引将每个数据项与每个vnode关联。这导致现有的Vue组件被重用，但绑定到不同的项，当从数组中删除项后重新呈现列表时。

这就是为什么您应该始终将key绑定到唯一标识该特定项的值。在您的示例中，由于每个项目都是唯一的字符串，因此您可以直接绑定到该字符串：

<row-component v-for="(row, index) in rows" :key="row">
                                            ^^^^^^^^^^