Vue foreach 没有正确过滤

Question

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

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

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

根据 StackOverflow 的要求：

来自 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

你只需要在v-for中添加key

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

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

见工作小提琴here。