Vue проблема реактивности, нужны некоторые объяснения - PullRequest
Новая
       42

Vue проблема реактивности, нужны некоторые объяснения

0 голосов
/ 14 февраля 2019

Я удалил большинство бесполезных частей своего кода, поэтому не беспокойтесь, если этот код на самом деле не имеет смысла, он просто показывает вам, что не работает.

Сначала я создаю массивиз базового массива с именем objects: 

objects: [
        {
          text: "I dont trigger stuff",
        },
        {
          "text": "I dont trigger stuff",
        },
        {
          text:"I trigger stuff",
          activated: undefined,
        },
],

И функцией создания 

created() {
    const newArray = [];

    this.objects.forEach(anObj => {
      anObj.activated = false;
      newArray.push(anObj);
    });

    this.filteredObjects = newArray;
},

Я инициализирую свойство activated для false.В моем реальном коде я использую не forEach, а find, но результат тот же.

Затем я отображаю несколько кнопок для запуска «активации» 

<button
    v-for="(myObj, index) in filteredObjects"
    :key="index"
    @click="activateObject(myObj, index)">
    {{ myObj.text }}
</button>

И эта функция запускается так: 

activateObject(anObj, anObjIndex) {
      this.$set(this.filteredObjects[anObjIndex], 'activated', !anObj.activated)
},

Моя цель здесь - просто обновить свойство activated.

Чтобы проверить, работает ли реактивность, яУ меня есть наблюдатель: 

watch: {
    filteredObjects: {
      handler() {
          alert('called')
      },
      deep: true,
    }
},

У меня есть два вопроса:

1 / Поскольку все свойства activated установлены для false для всех объектов, почему существует только одинработает, тот, чье свойство изначально установлено на undefined?

2 / Если я обновлю свою функцию активации на: 

activateObject(anObj, anObjIndex) {
      anObj.activated = !anObj.activated;
      this.$set(this.filteredObjects, anObjIndex, anObj);
},

Это работает хорошо.Может кто-нибудь объяснить мне, почему и в чем разница?

В обоих случаях VueJS Devtools отображает обновленные значения при нажатии на кнопку «обновить».Это проблема реактивности.

Вы можете найти скрипку здесь:

https://jsfiddle.net/dv1jgneb/

1 Ответ

0 голосов
/ 14 февраля 2019

Из Документов :

Так как Vue выполняет процесс преобразования getter / setter во время инициализации экземпляра, свойство должно присутствовать в объекте данных для преобразования Vueэто и делает его реактивным.

Это объясняет, почему только третья кнопка "вызывает вещи".

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

this.objects.forEach(anObj => {
  this.$set(anObj, 'activated', false);
  newArray.push(anObj);
});

JS Fiddle

Надеюсь, это поможет!

...