Vue foreach沒有正確過濾

Question

我一直在嘗試Vue 1.x，而且我剛剛切換到2.x，並且我一直在緩慢地修改一些東西，主要是指令。

現在我正在努力過濾數組。想象一下，我有三個項目，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; 
}); 

我知道還有另一種方法來做這個過濾，通過拼接數組，但這種方式發生了相同的結果。

有人能教導我嗎？我覺得我的錯誤實際上很愚蠢，但我現在似乎無法弄清楚。

Answer 1

你只需要在v-for

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

添加key由於性能的提升，V-對於使用一個「就地補丁」戰略和列表呈遞將無法在子組件狀態或臨時DOM改變狀態變化。要跟蹤這些更改，您需要使用v-for添加關鍵屬性。

查看工作小提琴here。