解決vue中對象屬性改變視圖不更新的問題
更新時間：2018年02月23日 09:10:54 作者：涵一
下面小編就為大家分享一篇解決vue中對象屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
常規(guī)情況下我們在vue實例的data中設(shè)置響應(yīng)數(shù)據(jù)。但當(dāng)數(shù)據(jù)為對象，我們增加或刪除對象屬性值時，視圖并不觸發(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中對象屬性改變視圖不更新的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue動態(tài)路由實現(xiàn)多級嵌套面包屑的思路與方法
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
VSCode前端Vue項目引入Element-ui組件三步簡單操作方法
elementui相當(dāng)于一個庫,封裝好的內(nèi)容,我們引入到vue項目中,就可用庫中的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VSCode前端Vue項目引入Element-ui組件的三步簡單操作方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實例代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細的代碼示例,需要的朋友可以參考下2023-04-04
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue devtools的安裝與使用教程,需要的朋友可以參考下2018-08-08
如何使用yarn創(chuàng)建vite+vue3&&electron多端運行
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運行,本文分步驟給大家介紹的非常詳細，包括使用yarn創(chuàng)建vite+vue3項目會遇到哪些問題，感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了vue彈出框組件封裝，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10