[Vuejs]-VueJs Reactivity

by

0👍

You could pre-populate available before the objects become reactive:

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;
})

Alternatively you can use $set to add a new property later:

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

The relevant documentation is https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats.

0👍

The way the vue (2.0) reactivity system works is with Object.defineProperty because of the way this works it will not work on nested properties only on primitive values. There ways to get around this, the simplest way is to make that property your boolean one a computed one like this:

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

this code will now be reactive.
Another solution is to use $set as suggested. Further more you can consider using the vue reactive internal api, see here and here

Leave a comment