Vue删除子组件的状态

Question

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

当我调用this.rows.splice（index，1）时，VueJs总是从中删除最后一个组件。$ children并在组件中保存内部状态。$ data;

示例在这里

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

如何解决？

Answer 1

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

这就是为什么你应该总是将key绑定到唯一标识该特定项的值。在您的示例中，由于每个项都是唯一的字符串，您只需绑定到该项：

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