VueJs Реактивность

Question

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

export default {
  name: 'componentname',
  data () {
    return {
      items: []
    }
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      this.$http.get('HTTP_API_ADDRESS').then(res => {
        this.items = res.data;
      })
    }
  }
}

Я использую в своем шаблоне цикл v-for для элементов в массиве items, которые появляются после вызова моегоAPI.

У меня проблема в том, что объекты в массиве содержат логическое значение, которое я пытаюсь обновить на странице с помощью щелчка, но объект не обновляется на странице, если что-то явно не былоопределено в экземпляре обновляется.

Пример, просто пример - код не логичен.

<ul>
  <li v-for="item in items" @click="item.available = !item.available">{{ item.name }} | {{ item.available }}</li>
</ul>

Идея состоит в том, что доступные будут отображать true или false в зависимости от щелчка дляпункт.

Я считаю, что это связано с элементами объектов, которые не определены в mount, однако я не уверен, как бы я это сделал, если бы они были в массиве?

Answer 1

Система реактивности vue (2.0) работает с Object.defineProperty, так как она не работает с вложенными свойствами только для примитивных значений. Есть способы обойти это, самый простой способ состоит в том, чтобы сделать это свойство вашим логическим, вычисляемым, например:

computed: {
     booleanValue(){
        return this.myObject.someValue
    }
}

, этот код теперь будет реагирующим. Другое решение заключается в использовании $set как предложено. Более того, вы можете рассмотреть возможность использования vue реактивного внутреннего API, см. здесь и здесь

Answer 2

Вы можете предварительно заполнить available до того, как объекты станут реактивными:

this.$http.get('HTTP_API_ADDRESS').then(res => {
  const items = res.data;

  for (const item of items) {
    item.available = false;
  }

  // The array and its objects are made reactive on the next line
  this.items = items;
})

В качестве альтернативы вы можете использовать $set, чтобы добавить новое свойство позже:

@click="$set(item, 'available', !item.available)"

соответствующая документация https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats.