vue 報錯 ：屬性undefined（頁面成功渲染）

vue 報錯：Cannot read property 'instrumentId' of undefined"

相關代碼如下：

<template> ... <span>{{data.params.instrumentId}}</span> ... </template> <script> export default { data () { return { data: {} }; }, methods: { // 請求接口獲得數據 getData () { request({ url: '/tapi/futures/' }).then(response => { if (response) { allData = response; // allData 是一個對象，用來儲蓄數據 this.data = allData.IF; } }); } }, created () { this.getData(); } }; </script> 

結果返回的數據結構如圖：

雖然頁面可以正常顯示，但 Vue 和瀏覽器控制台都報錯如下，一直找不到原因，求解。

 

 

解決方法

1.因為是異步請求，頁面渲染剛的時候還沒有拿到這個值，所以會報錯。你需要在節點上用if判斷一下，在有數據的時候再進行渲染。或者你在聲明data的時候，將里面的字段也一並聲明出來。

<template>
    ...
    <span v-if="data.params && data.params.instrumentId">{{data.params.instrumentId}}</span> ... </template>

2.

 created () {
    this.getData(); } 把上面改成如下： created () { this.$nextTick(function(){ this.getData(); }); }