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


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

解決辦法:
$.each(clientData, function (k, v) {
Vue.set(vueData,k,Object.assign({}, v));
});
clientData 為外部初始化的數(shù)據(jù)。
Object.assign({}, v)克隆一個(gè)新對象賦值給vueData中相關(guān)項(xiàng),設(shè)置完后依然會(huì)更新視圖,保證雙向綁定有效。
總結(jié)
以上所述是小編給大家介紹的Vue對象賦值視圖不更新問題及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝
這篇文章主要為大家介紹了vue不用import直接調(diào)用實(shí)現(xiàn)接口api文件封裝,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
一文掌握Pinia使用及數(shù)據(jù)持久化存儲(chǔ)超詳細(xì)教程
這篇文章主要介紹了Pinia安裝使用及數(shù)據(jù)持久化存儲(chǔ)的超詳細(xì)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以 HTML5為主 , FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07
Vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)簡單計(jì)時(shí)器應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07

