alexbuki
@alexbuki
программист js

Как обновить computed property в VUE при изменении элемента массива Array?

Добрый день.
Есть computed prop- filterResultSelectionIds:
filterResultSelectionIds() {
            let filterSelection = [];
            this.filterResultSelection.forEach((group) => {
                filterSelection.push(group);
            });
            filterSelection = [].concat(...filterSelection);
            return filterSelection.map(el => el.id);
        }


По клику на чекбокс изменяется элемент в группе(group), сам массив filterResultSelectionIds остается неизменным.
Как сделать так чтобы computed prop все равно обновлялось?
  • Вопрос задан
  • 3610 просмотров
Решения вопроса 2
@floydback
Вычисляемые свойства всегда кешируют значение и обновляют кеш, только когда поменялись реактивные данные. Массив он не обновляет, если только не изменилась его длинна. Так что изменение элемента массива не будет триггерить обновление вычисляемого свойства. Можно использовать watcher с опцией deep: true
Ответ написан
Комментировать
@2perca
используйте Vue.set() или this.$set() при обновлении массива, который должен лежать либо в data либо в state, а не в computed
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ozeddev
Оставлю здесь это для тех, кто ищет ответ на похожий вопрос.

В таких ситуациях, когда мы хотим "обновить" computed свойство при наступлении нереактивного события, иногда очень удобно в data задать переменную-счётчик. При наступлении такого события мы просто увеличиваем счётчик.

В нашем целевом computed свойстве используем эту переменную как угодно, например так:

data() {
    return {
      changed: 0,
      myArray: []
    }
},
computed: {
    isArrayChanged() {
      let hook = this.changed;
      return (myArray)
    }
},
methods: {
    myArrayNewLenght(data) {
      myArray.length = data; //
      this.changed++;
    }
}


Несмотря на то, что такое изменение длины массива является нереактивным, мы изменили нашу реактивную переменную changed, которая используется в нашем computed свойстве, а значит свойство обновится.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы