在Vue 中呼叫資料出現屬性不存在的問題

這已經是我在呼叫資料時趟過幾次的坑了，索性記錄下來防止後面再犯；

一般我們請求資料來渲染乙個頁面的時候，請求下來的資料基本上都是陣列或是物件，再通過列表迴圈和插值表示式渲染的頁面；在data 中提前宣告接收資料的變數時若為指定型別，就直接將資料渲染到頁面，在瀏覽器的控制台基本上都會出現「某某屬性未定義」的英文報錯；下面舉個例子：

先假設請求的是下面的json 資料：

,
// 。。。。。
]}

資料請求下來將data的學生分數選項存到scoreinfo中，如下：

new vue(
}})

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

...
}

這樣寫後，瀏覽器的控制台就會報錯，告訴name這個屬性未定義，究其原因是，我們一般請求資料，雖然在這個元件例項建立的時間就已經請求了，但是，請求資料，一般都是使用非同步的，在頁面渲染時最開始時，scoreinfo:僅僅是個空陣列，故會報name這個屬性確實不存在錯誤提示；

解決辦法：

new vue(]   // 在空陣列中加乙個空物件
}}})

當然我們平時請求的資料，不會這麼簡單，這裡在將要請求的數簡單修改一下：

"code": 0,
"data":[
},// 。。。。。
]}

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

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

new vue(}]
}}})

當然，還可以將資料改的更為複雜，但只需按照這個思路，就可以輕鬆的解決了