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