Question

问题

侦听子组件未检测到对象的更改。

上下文

我有一个空对象，它在从API返回时存储值。此对象绑定到子组件中的属性。

data () {
  return {
    filterOperators: {}
  };
},

每次调用此方法时，都会将包含响应的命名数组添加到对象中。

getfilterOperators: function (fieldName) {
  this.filterOperatorsAction(fieldName, response => {
    this.$data.filterOperators[fieldName] = response.Data;
  });
}

Answer 1

在VueJS中，添加到对象的属性不是被动的。您需要使用vm.$set方法使其成为被动的：

getfilterOperators: function (fieldName) {
  this.filterOperatorsAction(fieldName, response => {
    this.$set(this.filterOperators,fieldName,response.data);
  });
}

您可以在此页面上阅读更多信息：Reactivity in Depth

Answer 2

对于Vue 1，它应该像这样构造，以便允许Vue检测对象的变化：

this.$set('filterOperators.' + fieldName, response.data);

参考：Reactivity in Depth

Vue.js：监视对象的动态更改

2 个答案: