v-model 繫結物件不實時更新 原因和解決方案
阿新 • • 發佈:2021-11-01
今天遇到這樣一個問題動態的向一個被繫結的物件中新增屬性。Vue 無法檢測 property 的新增或移除。由於 Vue 會在初始化例項時對 property 執行 getter/setter 轉化,所以 property 必須在data
物件上存在才能讓 Vue 將它轉換為響應式的。例如:但是在實際應用中問題出現了:在向物件中新增屬性後,與物件繫結的元件內容卻未發生變化,必須要再次重新整理元件,其內容才會變為更改後的內容。
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應式的
vm.b = 2
// `vm.b` 是非響應式的
對於已經建立的例項,Vue 不允許動態新增根級別的響應式 property。但是,可以使用Vue.set(object, propertyName, value)
Vue.set(vm.someObject, 'b', 2)
您還可以使用vm.$set
例項方法,這也是全域性Vue.set
方法的別名:
this.$set(this.someObject,'b',2)
至此,v-model
繫結資料不實時更新的問題方才得到了解決。