解決vue.js 資料渲染成功仍報錯的問題

頁面資料已經顯示了,但是控制台報錯,某個變量未定義.如下圖所有:

原因可能是因為資料還沒加載好的時候已經去渲染頁面,這時候是沒有資料的,所有渲染報錯.

是以需要在查詢到資料後再去渲染頁面.

解決辦法:

第一步:在vue執行個體中定義一個變量,預設值false,當資料加載完成,指派為true

export default {
  data() {
   return {
    flag: false,
   }
  },
  created() {
   //加載資料的邏輯
   //資料加載完成
   this.flag=true;
  },
           

第二步:在HTML中加一個判斷,隻有當變量為true時才渲染頁面

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

這時候重新整理一下頁面,發現不再報錯了.