1. 程式人生 > 其它 >v-model 繫結物件不實時更新 原因和解決方案

v-model 繫結物件不實時更新 原因和解決方案

今天遇到這樣一個問題動態的向一個被繫結的物件中新增屬性。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)

方法向巢狀物件新增響應式 property。例如,對於:

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

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

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

至此,v-model 繫結資料不實時更新的問題方才得到了解決。