[Vuejs]-Why an addition of a key does not trigger a watched variable?

by

2👍

✅

It appears you are victim of a Reactivity/Change Detection Caveat.

Instead of:

this.allevents[cal] = JSON.parse(message).filter(x => true)

Try:

Vue.set(this.allevents, cal, JSON.parse(message).filter(x => true))

Or:

this.$set(this.allevents, cal, JSON.parse(message).filter(x => true))

Relevant excerpt from the docs:

Change Detection Caveats

Due to the limitations of modern JavaScript (and the abandonment of
Object.observe), Vue cannot detect property addition or
deletion. Since Vue performs the getter/setter conversion process
during instance initialization, a property must be present in the
data object in order for Vue to convert it and make it reactive. For
example:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive

Vue does not allow dynamically adding new root-level reactive
properties to an already created instance. However, it’s possible to
add reactive properties to a nested object using the Vue.set(object, key, value) method:

Vue.set(vm.someObject, 'b', 2)

You can also use the vm.$set instance method, which is an alias to
the global Vue.set:

this.$set(this.someObject, 'b', 2)
👤acdcjunior

Leave a comment