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