解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題
最近在做一個vue項目，用的是官方推薦的axios請求數(shù)據(jù)，數(shù)據(jù)結構是一級對象嵌套二級對象，發(fā)現(xiàn)一級對象數(shù)據(jù)渲染不報錯，二級數(shù)據(jù)渲染報錯。很是郁悶！data函數(shù)如下
export default {
name: 'hello',
data() {
return {
card:{}
}
}
}
返回的數(shù)據(jù)如下：
{
"object":{
"subObject":"123",
...
}
}
報錯的原因是在data函數(shù)return的card里沒有二級對象.所以會報錯；
解決辦法是：
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中加上下面這句：
<template> <div v-if="!loading"> <!----你的html代碼------> </div> </template>
然后就不會報錯了！希望對你有幫助！~溜了~~~
拓展知識：解決Vue組件頁面渲染正常對象報錯undefined的問題
首先，頁面代碼：{{options.fileList[0].fullPath}}，
渲染結果：
（渲染成功），
但是控制臺依然報錯：
如果有跟我遇到同樣問題的朋友一定跟我一樣，心里一萬只草泥馬飄過，都顯示正常了，你TM的還給我報錯，這我就忍不了了，首先我在頁面節(jié)點上直接打印，OK，沒有問題，能完美的打印出來，然后換了個思路，在mounted里面看看什么情況呢，功夫不負有心人，
，mounted里面打印出來是個空的數(shù)組，那么我應該就知道什么問題了，應該是頁面加載的時候，數(shù)據(jù)還沒有傳過來，但是這時候我們已經(jīng)開始在使用了，所以會報undefined的錯誤，當數(shù)據(jù)的值傳過來的時候，頁面找到這個數(shù)據(jù)，并渲染上去，所以我看到的頁面又是正常了，所以這樣的問題應該怎么解決呢？
答案也很簡單，在你渲染的節(jié)點加個判斷就好了， 
，這樣的話當發(fā)現(xiàn)它為undefined的時候就不會去讀取數(shù)據(jù)，等有數(shù)據(jù)的時候再去讀取，這樣的話，就不會出現(xiàn)undefined的錯誤了。
以上這篇解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了在vue3.0中封裝button使用slot組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
vue-resource調(diào)用promise取數(shù)據(jù)方式詳解
這篇文章主要介紹了vue-resource調(diào)用promise取數(shù)據(jù)方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進入不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了Vue.js數(shù)據(jù)綁定之data屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家分享了Vue3的 插槽使用匯總，在 2.6.0中，vue 為具名插槽和作用于插槽引入了一個新的統(tǒng)一語法：v-slot。它取代了 slot 和 slot-scope 在新版中的應用，下面就一起來看看文章的詳細內(nèi)容吧2021-12-12
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
這篇文章主要介紹了Vue項目導入導出文件功能以及導出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue/react項目刷新頁面出現(xiàn)404報錯的原因及解決辦法
Vue項目打包部署到線上后,刷新頁面會提示404,下面這篇文章主要給大家介紹了關于vue/react項目刷新頁面出現(xiàn)404報錯的原因及解決辦法,文中將解決的辦法介紹的很詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11