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-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue不用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ì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以 HTML5為主 , FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07