如何解決vue.js數(shù)據(jù)渲染成功仍報錯的問題-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)公司主營長治網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),長治h5微信小程序開發(fā)搭建,長治網(wǎng)站營銷推廣歡迎長治等地區(qū)企業(yè)咨詢

小編給大家分享一下如何解決vue.js數(shù)據(jù)渲染成功仍報錯的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近在做一個vue項目，用的是官方推薦的axios請求數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)是一級對象嵌套二級對象，發(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}}，

渲染結(jié)果：（渲染成功），

但是控制臺依然報錯：

如果有跟我遇到同樣問題的朋友一定跟我一樣，心里一萬只草泥馬飄過，都顯示正常了，你TM的還給我報錯，這我就忍不了了，首先我在頁面節(jié)點(diǎn)上直接打印，OK，沒有問題，能完美的打印出來，然后換了個思路，在mounted里面看看什么情況呢，功夫不負(fù)有心人， ，mounted里面打印出來是個空的數(shù)組，那么我應(yīng)該就知道什么問題了，應(yīng)該是頁面加載的時候，數(shù)據(jù)還沒有傳過來，但是這時候我們已經(jīng)開始在使用了，所以會報undefined的錯誤，當(dāng)數(shù)據(jù)的值傳過來的時候，頁面找到這個數(shù)據(jù)，并渲染上去，所以我看到的頁面又是正常了，所以這樣的問題應(yīng)該怎么解決呢？

答案也很簡單，在你渲染的節(jié)點(diǎn)加個判斷就好了， ，這樣的話當(dāng)發(fā)現(xiàn)它為undefined的時候就不會去讀取數(shù)據(jù)，等有數(shù)據(jù)的時候再去讀取，這樣的話，就不會出現(xiàn)undefined的錯誤了。

以上是“如何解決vue.js數(shù)據(jù)渲染成功仍報錯的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：如何解決vue.js數(shù)據(jù)渲染成功仍報錯的問題-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article10/cddgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計、ChatGPT、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)