Vue對(duì)象賦值視圖不更新問題及解決方法
當(dāng)我們需要對(duì)vue里面data數(shù)據(jù)做動(dòng)態(tài)更新。
如下,實(shí)例化了Vue對(duì)象,其下vueData為data屬性指向,現(xiàn)在我們需要由后臺(tái)裝載完整的data對(duì)象


現(xiàn)在我們需要裝載更新完整的data對(duì)象,常規(guī)的賦值方式并不會(huì)引起視圖的更新,雙向綁定會(huì)失效。
如上圖中默認(rèn)broker_list為空對(duì)象,裝載完之后broker_list 包含新項(xiàng)(ZY98)

解決辦法:
$.each(clientData, function (k, v) {
Vue.set(vueData,k,Object.assign({}, v));
});
clientData 為外部初始化的數(shù)據(jù)。
Object.assign({}, v)克隆一個(gè)新對(duì)象賦值給vueData中相關(guān)項(xiàng),設(shè)置完后依然會(huì)更新視圖,保證雙向綁定有效。
總結(jié)
以上所述是小編給大家介紹的Vue對(duì)象賦值視圖不更新問題及解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析
這篇文章主要介紹了Vue 框架之動(dòng)態(tài)綁定 css 樣式的方法,本文通過分享小實(shí)例給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享,文章圍繞Vue?Vuex的相關(guān)資料展開配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享,需要的小伙伴可以參考一下2022-04-04
使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法,初始化的隨機(jī)位置算法,通過實(shí)例代碼介紹了計(jì)算偏移量的方法,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
VUE使用draggable實(shí)現(xiàn)組件拖拽
這篇文章主要為大家詳細(xì)介紹了VUE使用draggable實(shí)現(xiàn)組件拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element-ui Upload上傳組件動(dòng)態(tài)配置action方式
這篇文章主要介紹了element-ui Upload上傳組件動(dòng)態(tài)配置action方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07

