Блог

Я должен добавить дополнительные строки, заставляющие Vue пересчитывать вычисленный реквизит, в частности:

 var foo = this.groups;
this.groups = {};
this.groups = foo;
  

как видно из этой скрипки: https://jsfiddle.net/8bqv29dg /. Без этого available_groups не обновляется.

Почему это так и каков чистый способ available_groups обновления groups ?

Пробовал добавлять groups к «глубокому просмотру», но это не помогло.

Используется $set для добавления нового свойства для объекта данных:

    methods: {
    add_group: function(key, name) {
      this.$set(this.groups, key, {key, name});
    },
  }
  

Здесь описана реактивность vue

Vue не отслеживает новые элементы, добавленные к объекту:

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Одним из решений является использование Vue.set или переназначение объекта, как в примере ниже:

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