解決vue中對象屬性改變視圖不更新的問題
更新時間：2018年02月23日 09:10:54 作者：涵一
下面小編就為大家分享一篇解決vue中對象屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
常規(guī)情況下我們在vue實例的data中設置響應數據。但當數據為對象，我們增加或刪除對象屬性值時，視圖并不觸發(fā)更新，如何解決這個問題呢？
實例代碼如下：
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)創(chuàng)建新對象
例：
this.obj.k1='v1'；
this.obj = Object.assign({}, this.obj)
或
this.obj = Object.assign({}, this.obj,{'k1','v1'})
以上這篇解決vue中對象屬性改變視圖不更新的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue項目,?在實際工作中,?有些時候需要在?加載完某些數據之后對當前頁面進行刷新,?這篇文章主要為大家介紹了三種常用方法,需要的可以參考一下2023-10-10
這篇文章主要介紹了使用webpack搭建vue項目的方法，本文以開發(fā)環(huán)境為例，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了el-table樹形表格表單驗證(列表生成序號)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了Vue基礎語法知識梳理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-12-12
這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數據服務器全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文分步驟給大家介紹了Vue使用枚舉類型實現HTML下拉框的相關知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
vue element-ui el-date-picker限制選擇時間為當天之前的代碼
這篇文章主要介紹了vue element-ui el-date-picker如何限制選擇時間為當天之前,文中給大家提供了代碼段和截圖，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了vue.js項目中使用原生js實現移動端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了Vue3?函數式彈窗的實例小結,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11