javascript - Vue.js:监视对象的动态更改

Question

问题

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

上下文

我有一个空对象，用于存储从 API 返回的值。该对象绑定(bind)到子组件中的属性。

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

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

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

Answer 1

在 VueJS 中，添加到对象的属性不是 react 性的。您需要使用 vm.$set 方法使它们具有反应性:

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

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