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

Question

[Александр Буки]

Добрый день.
Есть 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 все равно обновлялось?

Comments

[Сергей]

А чему привязаны значения чекбоксов? Изменение значений как-то обрабатывается? Можете показать пример вывода чекбоксов?

[nextGen]

Насколько я понимаю, this.filterResultSelection это часть зависимостей этого вычисляемого свойства. Когда массив изменяется, то и компьютед должен пересчитываться.
Если компьютед не реактивный, рекомендуют добавить реактивности. Завести какую- нибудь переменную, которая будет выполнять роль флага, например: isSelectionChanged = false. Типо на инпут повесите @change="isSelectionChanged = true". Внутри компьютеда делаете проверку if (isSelectionChanged) и в тело if весь код поместить. В конце флаг опять надо на false менять.

[Александр Буки]

nextGen, да, думал сделать так, но в итоге компьютед св-ва перенес методы и вызывал их при проверке на наличие элементов массива. Но вам спасибо.

[Александр Буки]

Sponom, спасибо за желание помочь, нашел выход самостоятельно

[nextGen]

Александр Буки, рад был помочь)

Answer 1

[floydback]

Вычисляемые свойства всегда кешируют значение и обновляют кеш, только когда поменялись реактивные данные. Массив он не обновляет, если только не изменилась его длинна. Так что изменение элемента массива не будет триггерить обновление вычисляемого свойства. Можно использовать watcher с опцией deep: true

Answer 2

[2perca]

используйте Vue.set() или this.$set() при обновлении массива, который должен лежать либо в data либо в state, а не в computed

Answer 3

[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 свойстве, а значит свойство обновится.