新聞中心
本篇內(nèi)容介紹了“vue.js數(shù)據(jù)渲染成功仍報(bào)錯(cuò)怎么解決”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),羅山企業(yè)網(wǎng)站建設(shè),羅山品牌網(wǎng)站建設(shè),網(wǎng)站定制,羅山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,羅山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
最近在做一個(gè)vue項(xiàng)目,用的是官方推薦的axios請(qǐng)求數(shù)據(jù),數(shù)據(jù)結(jié)構(gòu)是一級(jí)對(duì)象嵌套二級(jí)對(duì)象,發(fā)現(xiàn)一級(jí)對(duì)象數(shù)據(jù)渲染不報(bào)錯(cuò),二級(jí)數(shù)據(jù)渲染報(bào)錯(cuò)。很是郁悶!data函數(shù)如下
export default { name: 'hello', data() { return { card:{} } } }
返回的數(shù)據(jù)如下:
{ "object":{ "subObject":"123", ... } }
報(bào)錯(cuò)的原因是在data函數(shù)return的card里沒有二級(jí)對(duì)象.所以會(huì)報(bào)錯(cuò);
解決辦法是:
export default { name: 'detail', data() { return { loading: false, card:{}, } }, created() { this.fetchData(); }, methods: { fetchData() { this.loading = true; let that=this; this.ajax.get(url, { params: { id: "yourId" } }) .then(function (response) { that.loading = false; }, function (error) { console.log(error); }) } }
然后在html中加上下面這句:
拓展知識(shí):解決Vue組件頁面渲染正常對(duì)象報(bào)錯(cuò)undefined的問題
首先,頁面代碼:{{options.fileList[0].fullPath}},
渲染結(jié)果:
(渲染成功)
但是控制臺(tái)依然報(bào)錯(cuò):
如果有跟我遇到同樣問題的朋友一定跟我一樣,心里一萬只草泥馬飄過,都顯示正常了,你TM的還給我報(bào)錯(cuò),這我就忍不了了,首先我在頁面節(jié)點(diǎn)上直接打印,OK,沒有問題,能完美的打印出來,然后換了個(gè)思路,在mounted里面看看什么情況呢,功夫不負(fù)有心人 ,mounted里面打印出來是個(gè)空的數(shù)組,那么我應(yīng)該就知道什么問題了,應(yīng)該是頁面加載的時(shí)候,數(shù)據(jù)還沒有傳過來,但是這時(shí)候我們已經(jīng)開始在使用了,所以會(huì)報(bào)undefined的錯(cuò)誤,當(dāng)數(shù)據(jù)的值傳過來的時(shí)候,頁面找到這個(gè)數(shù)據(jù),并渲染上去,所以我看到的頁面又是正常了,所以這樣的問題應(yīng)該怎么解決呢?
答案也很簡單,在你渲染的節(jié)點(diǎn)加個(gè)判斷就好了
這樣的話當(dāng)發(fā)現(xiàn)它為undefined的時(shí)候就不會(huì)去讀取數(shù)據(jù),等有數(shù)據(jù)的時(shí)候再去讀取,這樣的話,就不會(huì)出現(xiàn)undefined的錯(cuò)誤了。
“vue.js數(shù)據(jù)渲染成功仍報(bào)錯(cuò)怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
新聞標(biāo)題:vue.js數(shù)據(jù)渲染成功仍報(bào)錯(cuò)怎么解決
URL地址:http://www.dlmjj.cn/article/psiods.html