Vue删除具有其状态的子组件

Question

我要删除子组件。我使用this.rows.splice（index，1）

当我调用this.rows.splice（index，1）时，VueJ总是从this。$ 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">
                                            ^^^^^^^^^^