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