在Vue 中調用數據出現屬性不存在的問題

這已經是我在調用數據時趟過幾次的坑了，索性記錄下來防止后面再犯；

一般我們請求數據來渲染一個頁面的時候，請求下來的數據基本上都是數組或是對象，再通過列表循環和插值表達式渲染的頁面；在data 中提前聲明接收數據的變量時若為指定類型，就直接將數據渲染到頁面，在瀏覽器的控制台基本上都會出現 “某某屬性未定義” 的英文報錯；下面舉個例子：

先假設請求的是下面的json 數據：

{
  "code": 0,
  "data":[
    {
      "name": "Buccky",
      "age": 16,
      "score": 77
    },
    // 。。。。。
  ]
}

數據請求下來將data的學生分數選項 存到 scoreInfo中，如下：

new Vue({
  data(){
    return {
      scoreInfo: []
    }
  }
})

這里為了說明問題，不用列表渲染，我們只取第一條數據中的name進行渲染，如果像這樣下面這樣寫的話，就會出現上面說的那種報錯：

...
<span>{{ scoreInfo[0].name }}</span>

這樣寫后，瀏覽器的控制台就會報錯，告訴name 這個屬性未定義，究其原因是，我們一般請求數據，雖然在這個組件實例創建的時間就已經請求了，但是，請求數據，一般都是使用異步的，在頁面渲染時最開始時，scoreInfo: [] 僅僅是個空數組，故會報name 這個屬性確實不存在錯誤提示；

解決辦法：

new Vue({
  data(){
    return {
      scoreInfo: [{}]   // 在空數組中加一個空對象
    }
  }
})

當然我們平時請求的數據，不會這么簡單，這里在將要請求的數簡單修改一下：

  "code": 0,
  "data":[
    {
      "name": "Buccky",
      "age": 16,
      "score": 77,
      "teacher": {
        "name": "Miss Li",
        "age": 24,
      }
    },
    // 。。。。。
  ]
}

此時需要將老師的名字渲染出來：

<span>{{ scoreInfo[0].teacher.name }}</span>

要想不報錯，還需要像如下修改一下 scoreInfo:

new Vue({
  data(){
    return {
      scoreInfo: [{teacher:{}}]
    }
  }
})

當然，還可以將數據改的更為復雜，但只需按照這個思路，就可以輕松的解決了