在创建的函数中定义的数据对象但不反应？

Question

我有一个Vue实例，其中data属性初始化为对象：

＆＃13;

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    obj: { }
  },
  methods: {

  },
  created: function() {
    this.obj["obj2"] = {}
    this.obj["obj2"].count = 0
  },
  mounted: function() {
    setInterval(function() {
      this.obj.obj2.count++
      console.log(this.obj.obj2.count)
    }.bind(this), 1000)
  }
})

＆＃13;

<div id="app">
  {{ obj['obj2'].count }}
</div>

＆＃13;

＆＃13;

＆＃13;

然后在创建实例时，我将属性添加到 obj 。

但是，当我想显示对象的对象属性 count 时，它显示0并且不是被动的。如果我在数据中定义了整个对象，那么它是被动的，但是我不能在数据中定义对象，因为它的数据依赖于外部源 - API，这就是为什么它在< strong>创建功能。

我设法让它显示当前计数的唯一方法是强制更新视图但我不认为它是正确的解决方案。

有什么建议吗？

Answer 1

The problem is that Vue can not track completely new properties on its reactive objects. (It's a limitation of JavaScript).

It's described in detail here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

The short version is: You have to do

created: function() {
  Vue.set(this.obj, 'obj2', {})
  Vue.set(this.obj.obj2, 'count', 0)
}

or

created: function() {
  Vue.set(this.obj, 'obj2', {
    count: 0
  })
}