在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值的属性时。每次都会炸毁。