Reputation: 199
I have to add extra rows forcing Vue to recompute computed prop, specifically:
var foo = this.groups;
this.groups = {};
this.groups = foo;
as can be seen in this fiddle: https://jsfiddle.net/8bqv29dg/. Without these, available_groups
is not updated.
Why is that and what is the clean way to have available_groups
updating with groups
?
Have tried adding groups
to "deep-watched", but it did not help.
Upvotes: 1
Views: 81
Reputation: 1423
Use $set
to add new property for data object:
methods: {
add_group: function(key, name) {
this.$set(this.groups, key, {key, name});
},
}
Here described vue reactivity
Upvotes: 8
Reputation: 2524
Vue doesn't track new elements added to an object:
https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
One solution is to use Vue.set
or reassign the object, like the example below:
new Vue({
el: "#app",
data: {
groups: {1: {key: 1, label: 'Those guys'}},
},
computed: {
available_groups: function() {
return [{value: 0, label: 'Anyone'}].concat(Object.values(this.groups));
},
},
methods: {
add_group: function(key, name) {
Vue.set(this.groups, key, {key: key, name: name})
},
}
})
Upvotes: 2