根據官方文檔定義:如果在實例創建之后添加新的屬性到實例上,它不會觸發視圖更新。
當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data
選項,Vue 將遍歷此對象所有的屬性,並使用 Object.defineProperty
把這些屬性全部轉為 getter/setter。
受現代 JavaScript 的限制 (以及廢棄 Object.observe),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程,所以屬性必須在 data 對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。
解決方案
官方定義:
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上:
Vue.set(vm.obj, 'e', 0)
您還可以使用 vm.$set 實例方法,這也是全局 Vue.set 方法的別名:
this.$set(this.obj,'e',02)
有時你想向已有對象上添加一些屬性,例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是,添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象,讓它包含原對象的屬性和新的屬性:
// 代替 Object.assign(this.obj, { a: 1, e: 2 }) this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })
.