时间戳

首页 > 解决方案 > Vue 移除带有它状态的子组件

vue.js - Vue 移除带有它状态的子组件

问题描述

我想删除子组件。我使用 this.rows.splice(index, 1)

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

例子在这里

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

怎么修？

标签： vue.jscomponents

解决方案

Vue 默认根据 item 的 index 将每个数据项与每个 vnode 关联起来。这导致在从数组中删除项目后重新渲染列表时，现有的 Vue 组件被重用，但绑定到不同的项目。

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

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

推荐阅读