Vue foreach没有正确过滤

时间:2016-12-15 16:32:21

标签: vue.js vue-component vuejs2

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

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

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

根据StackOverflow的要求:

for-each 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;
});

我知道有另一种方法可以通过拼接数组来进行这种过滤,但是这种方式发生了相同的结果。

有人可以开导我吗?我觉得好像我的错误实在是相当愚蠢,但我现在似乎无法弄明白。

1 个答案:

答案 0 :(得分:2)

您只需在key

中添加v-for即可
<foo-single v-for="foo in foos" v-bind:foo="foo" :key="foo.id">
</foo-single>

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

请参阅工作小提琴here