快捷導(dǎo)航

解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問(wèn)題

更新時(shí)間：2018年08月25日 17:28:14 作者：炎炎烈日放煙花

今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

最近在做一個(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里沒(méi)有二級(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中加上下面這句：

<template>
 <div v-if="!loading">
 <!----你的html代碼------>
 </div>
</template>

然后就不會(huì)報(bào)錯(cuò)了！希望對(duì)你有幫助！~溜了~~~

拓展知識(shí)：解決Vue組件頁(yè)面渲染正常對(duì)象報(bào)錯(cuò)undefined的問(wèn)題

首先，頁(yè)面代碼：{{options.fileList[0].fullPath}}，

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

但是控制臺(tái)依然報(bào)錯(cuò)：

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

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