vue中檢測對象和數組值變化的問題


今天工作中遇到改變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)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM