Проблема действительного отображения с помощью v-for + vuex?

Question

[alaskafx]

Есть хранилище, в котором данные могут изменяться в любой момент:

хранилище:

cars: [
                {
                    name: 'Debian',
                },
                {
                  name: 'Ss'
                },
                {
                   name: 'Gorsto'
                },
            ],

мутация:

deleteCarFromArray: (state, payload) => {
           state.cars[payload] = {InfoCreate: -1}
        },

геттер:

carInfoGetter(store){
            return [...store.cars]
        }

В компоненте:

компьютед:

filteredCards() {
      return this.$store.getters.carInfoGetter.filter((el) => {
        return el.InfoCreate !== -1 && el.InfoCreate !== -2;
      });

Сами карточки:

<div  v-for="(card, index) in filteredCards" :key="index.id">
...
</div>

Суть проблемы в том, что, если происходит какое-то действие (вызывается мутация) - карточки, которые на странице никак не изменяются.
Карточки, которые НЕ возвращает фильтр filteredCards появляться не должны, а сейчас они остаются на месте и никак не изменяются при каких-то мутациях.
Как решить и почему так?

Answer 1

[Aetae]

Vue 2 не умеет слушать изменения массива по индексу. Тебе либо нужно использовать array.splice, либо Vue.set.

Comments

[alaskafx]

Спасибо, а можно чуть подробнее?

[Aetae]

alaskafx, основная фишка vue - реактивность: когда ты меняешь какое-то значение - все значения зависимые от него перерисовываются и пересчитываются.
Работает эта штука в Vue 2 не на магии, а на сеттерах и геттерах, и потому имеет технические ограничения, такие как невозможность автоматически отследить добавление новых ключей в объект, невозможность отследить изменение в массиве по индексу и другие. Об этом подробно написано в документации. В Vue 3 используется Proxy, а потому большая часть этих ограничений отпала.
Надеюсь это то, что ты имел ввиду под "подробнее".

Если же ты хотел готового кода то вот:

spoiler

Заменить:
state.cars[payload] = {InfoCreate: -1}
на:
state.cars.splice(payload, 1, {InfoCreate: -1});
или на:
Vue.set(state.cars, payload, {InfoCreate: -1});
но знай, что я в тебе разочарован:(.