Vue報錯 "TypeError: Cannot read property 'content' of undefined"

Vue出現該錯誤的原因很可能是因為請求服務器獲取數據是異步的，請求回來的時候已經開始渲染頁面，若此時定義的數據為空也就是沒有該數據的屬性，則其中的屬性值為undefined。

比如說以下代碼：

var  vm = new Vue({
   el: "#app",
   data: {
      reData: {}
   },
   methods: {

   }
})

<div class="detail">
    <div class="head">{{reData.data.content}}</div>
</div>

{{reData.data}}不會報錯，它是一個undefined，但{{reData.data.content}}會報錯，因為這就相當於undefined.content，因此會報錯。

解決方式有兩種，一種是在數據初始化的時候將data也進行初始化聲明，若reData下有多個屬性則全部聲明出來，如下：

var  vm = new Vue({
   el: "#app",
   data: {
      reData: {
         data: {},
         info: {}
      }
   },
   methods: {

   }
})

第二種是做一個v-if的判斷，如下：

<div class="detail" v-if="reData.data">
    <div class="head">{{reData.data.content}}</div>
</div>

注意：這里只能用v-if而不能用v-show，因為v-show控制的是節點的display屬性，節點實際還存在，同樣也會報錯。