今天工作中遇到改變vue data中某個對象的值,卻無法觸發視圖更新的問題。看了看官方文檔,怎么解決的呢?
1、檢測對象的變化
受現代 JavaScript 的限制(以及廢棄 Object.observe
),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter
轉化過程,所以屬性必須在 data
對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。
使用Object.assign()
或 _.extend()
方法來添加屬性
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
2. 檢測數組的變化
由於 JavaScript 的限制, Vue 不能檢測以下變動的數組:
(1)、當你利用索引直接設置一個項時,例如: vm.items[indexOfItem] = newValue
(2)、當你修改數組的長度時,例如: vm.items.length = newLength
如何解決上述問題呢?
方法1:
// Vue.set Vue.set(example1.items, indexOfItem, newValue)
方法2:
// Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)