Vue foreach неправильно фильтрует

Я пробовал 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;
});

Я знаю, что есть другой способ сделать эту фильтрацию, объединив массив, но таким образом происходил тот же результат.

Может ли кто-нибудь просветить меня? Я чувствую, что моя ошибка на самом деле довольно глупая, но я не могу понять это прямо сейчас.


vue.js vuejs2 vue-component
person FPJ    schedule 15.12.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам просто нужно добавить key в v-for

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

Для повышения производительности v-for использует стратегию «исправления на месте», и рендеринг списка не будет меняться при изменении состояния дочернего компонента или временного состояния DOM. Чтобы отслеживать эти изменения, вам нужно добавить ключевой атрибут с помощью v-for.

См. рабочую скрипту здесь.

person Saurabh    schedule 15.12.2016
comment
Большое спасибо, это работает. Не читал атрибут :key, который был прямо под примером, который я также пробовал: vuejs.org/v2/guide/list.html#Components-and-v-for - person FPJ; 15.12.2016