在vue中處理物件屬性改變視圖不更新問題？

下面我就為大家分享一篇解決vue中物件屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有幫助。

常規情況下我們在vue實例的data中設定回應資料。但當資料為對象，我們增加或刪除對象屬性值時，視圖並不會觸發更新，如何解決這個問題？

實例程式碼如下：

let vm = new Vue{
 el: '#app',
 data: {
  obj: {
    k: 'v'
  }
 },
 ...
}

有三種解決方案：

方案一：利用Vue.set(object,key,val)

範例：Vue.set(vm.obj,'k1','v1 ')

方案二：利用this.$set(this.obj,key,val)

範例：this.$set( this.obj,'k1','v1')

方案三：利用Object.assign({}，this.obj)建立新物件

範例：

 this.obj.k1='v1'；
 this.obj = Object.assign({}, this.obj)

或

this.obj = Object.assign({}, this.obj,{'k1','v1'})

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在angularJs中如何透過表格新增刪除修改查詢方法

如何使用ExtJs整合Echarts（詳細教學）

在angularJS如何實作動態新增,刪除div方法

#

以上是在vue中處理物件屬性改變視圖不更新問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！