Question

我必须添加额外的行来强制Vue重新计算所计算的道具，

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

在这个小提琴中可以看到：https://jsfiddle.net/8bqv29dg/。没有这些，available_groups将不会更新。

这是为什么？用available_groups更新groups的干净方法是什么？

尝试将groups添加到“深度监视”中，但没有帮助。

Answer 1

使用$set为数据对象添加新属性：

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

Here描述了vue反应性

Answer 2

Vue不会跟踪添加到对象中的新元素：

https://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})
    },
  }
})

除非被迫

2 个答案: