爲什麼 vue.js存在某些情況下 v-model綁定數據不實時更新呢?

最近做項目多次出現這個問題,嘗試多次解決了,浪費挺多時間,寫出來給有這類問題的朋友一個參考。

問題

再給vue data中object類型數據賦值時存在不實時顯示的情況

解決方法:

見Vue.js中文官網->進階->深入響應式原理->變化檢測問題

受現代 JavaScript 的限制(以及廢棄 Object.observe),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue
會在初始化實例時對屬性執行 getter/setter 轉化過程,所以屬性必須在 data 對象上存在才能讓 Vue
轉換它,這樣才能讓它是響應的。例如:

var vm = new Vue({
  data:{
      obj:{a:1}
  }
})
// `vm.a` 是響應的
vm.b = 2
// `vm.b` 是非響應的

1、使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上:

Vue.set(vm.someObject, 'b', 2)

您還可以使用 vm.$set 實例方法,這也是全局 Vue.set 方法的別名:

this.$set(this.someObject,'b',2)

2、使用 Object.assign() 或 _.extend() 方法來添加屬性

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章