解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問(wèn)題
在項(xiàng)目中遇到后臺(tái)數(shù)據(jù)還沒(méi)有加載完畢，但是頁(yè)面上調(diào)用了后臺(tái)數(shù)據(jù)中的字段，這樣就會(huì)報(bào)undefined。
例如：一進(jìn)入頁(yè)面直接回顯數(shù)據(jù)。
我在created里面請(qǐng)求接口進(jìn)行賦值 this.matterAll=[];
會(huì)報(bào)accessItemName為undefined；
原因以及解決辦法：
在上面data()中，我定義了matterAll:[],也就是空的數(shù)組，
template中，我又直接用了this.matterAll[0]，這個(gè)時(shí)候this.matterAll[0]=undefined，所以this.matterAll[0].accessItemName也是undefined，
需要注意的是，是先進(jìn)行頁(yè)面渲染再獲取數(shù)據(jù)，也就是數(shù)據(jù)還沒(méi)到就會(huì)渲染一次，數(shù)據(jù)到了再渲染一次，第一次渲染的時(shí)候就報(bào)錯(cuò)了。
data()中 設(shè)置一個(gè)空的值或者自定義的值，在數(shù)據(jù)到達(dá)之前顯示這個(gè)值
例：matterAll:[{accessItemName:""}]，還有一個(gè)辦法，在綁定數(shù)據(jù)的標(biāo)簽上加“v-if='要回顯的字段名'”，也就是當(dāng)需要顯示的數(shù)據(jù)存在時(shí)才顯示。
以上這篇解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)商品列表的無(wú)限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無(wú)限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁(yè)數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
再做前端頁(yè)面的時(shí)候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無(wú)論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue ECharts簡(jiǎn)易實(shí)現(xiàn)雷達(dá)圖
這篇文章主要介紹了基于Vue ECharts簡(jiǎn)易實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue項(xiàng)目遇見(jiàn)事件冒泡該如何處理詳解
冒泡事件處理是由內(nèi)而外發(fā)生的,例如有兩個(gè)父子div,給他們分別寫(xiě)上點(diǎn)擊事件,點(diǎn)擊子div先響應(yīng)的是子div,再是父div,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目遇見(jiàn)事件冒泡該如何處理的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例，文中結(jié)合實(shí)例代碼介紹了vue錨點(diǎn)跳轉(zhuǎn)的三種方式(頁(yè)內(nèi)跳轉(zhuǎn)，跨頁(yè)跳轉(zhuǎn)，函數(shù)跳轉(zhuǎn)),需要的朋友可以參考下2023-07-07
M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟
本文主要介紹了M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11