在Vue獲取JSON屬性出錯js

Question

我遇到了Vue的一個奇怪行爲。我做了一個ajax調用存儲結果（一些JSON）到名爲''modello'的Vue數據屬性。

{ 
    "lineaGialla": { 
    "selected": false, 
    "descrizione": "Questa è la descrizione della linea gialla", 
    "servizi": [ 
     {"nomeServizio": "servizio1","descrizione":"descrizione servizio1","selected": false}, 
     {"nomeServizio": "servizio2","descrizione":"descrizione servizio2","selected": false}, 
     {"nomeServizio": "servizio3","descrizione":"descrizione servizio3","selected": false} 
    ] 
    } 
} 

在模板中，當我訪問lineaGialla使用{{modello.lineaGialla}}它的工作原理，但是當我試圖訪問一個嵌套的屬性，如{{modello.lineaGialla.descrizione}}，我在控制檯中錯誤的數據屬性：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"

這裏是ajax調用。

var getData = function(){ 
    return new Promise(function(resolve, reject){ 
    $.ajax({ 
     type:'get', 
     url:'https://api.myjson.com/bins/w9xlb', 
     dataType: 'json', 
     success: function(response){ 
     resolve(response); 
     } 
    }); 
    }); 
}; 

這是我的Vue。

var Metromappa = new Vue({ 
    el: '#metromappa', 
    data: { 
    modello:{} 
    }, 
    methods:{ 

    }, 
    mounted: function(){ 
    var self = this; 
    getData().then(function(response){ 
     self.modello = response; 
    }, function(error){ 
     console.log(error); 
    }); 
    } 
}) 

它可能是什麼？

Answer 1

這裏的問題是數據異步檢索，這意味着您的數據是不存在 Vue第一次呈現模板時。以下是事件序列：

1. 的created生命週期事件被稱爲
2. 您對服務器對數據的請求
3. Vue公司的生命週期結束和Vue公司是沒有數據呈現第一
4. 你的Ajax調用數據完成
5. Vue公司重新呈現

ŧ在這裏，他的問題是步數3.當您嘗試訪問descrizione財產在你的模板

{{modello.lineaGialla.descrizione}} 

lineaGialla是undefined因爲數據尚未從服務器中檢索。所以，本質上你試圖閱讀undefined的descrizione，這是一個javascript錯誤。

在嘗試訪問可能不會立即填充的數據的屬性之前，您應該檢查以確保您的數據庫具有數據。

{{modello.lineaGialla && modello.lineaGialla.descrizione}} 

或者，如果這個插值中某些元素，可以防止渲染元素，直到有數據。

<div v-if="modello.lineaGialla"> 
    {{modello.lineaGialla.descrizione}} 
</div> 

什麼這兩個正在做的是檢查，以確保lineaGialla是一個非falsy值。如果是，則呈現數據。

當你渲染{{modello.lineaGialla}}時，你確定的原因是因爲Vue只會渲染任何東西。問題是，當您嘗試訪問undefined值的屬性時。每次都會炸燬。