Vue foreach 没有正确过滤

Question

我一直在尝试 Vue 1.x，我最近才切换到 2.x，我一直在慢慢修改一些东西，主要是指令。

现在我正在努力过滤数组。想象一下，我有 3 个项目，A、B 和 C。无论我说哪个被过滤掉，它总是最后出现的元素。所以假设我删除了A，那么C就会消失。

我创建了一个 jsFiddle 作为示例：https://jsfiddle.net/arj70sz4/

根据 Whosebug 的要求：

来自 HTML 的每个代码：

<foo-single
  v-for="foo in foos"
  v-bind:foo="foo"
>
</foo-single>

从 JS 过滤代码：

this.foos = this.foos.filter(function (v) {
  return foo.id != v.id;
});

我知道还有另一种方法可以通过拼接数组来进行此过滤，但那样会出现相同的结果。

谁能赐教一下？我觉得好像我的错误实际上很愚蠢，但我现在似乎无法弄清楚。

Answer 1

您只需添加key in v-for

<foo-single v-for="foo in foos" v-bind:foo="foo" :key="foo.id">
</foo-single>

为了提高性能，v-for 使用了“就地补丁”策略，列表渲染不会因子组件状态或临时 DOM 状态变化而改变。要跟踪这些更改，您需要使用 v-for 添加 key 属性。

查看工作 fiddle here。

Vue foreach not filtering correctly