leevanoetz
leevanoetz

Reputation: 199

Vue not updating computed unless forced to

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

Answers (2)

Alex
Alex

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

Marcelo
Marcelo

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

Related Questions