在Vue js中获取JSON属性时出错

我在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} ] } } 

在模板中，当我使用{{modello.lineaGialla}}访问数据属性lineaGialla时，它可以正常工作，但是当我尝试访问嵌套属性时，例如{{modello.lineaGialla.descrizione}} ，我得到一个错误安慰：

[Vue警告]：渲染函数出错：“TypeError：无法读取未定义的属性’descrizione’”

这里是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 ，这是一个javascript错误。

在尝试访问可能未立即填充的数据的属性之前，应该检查以确保您有数据。

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

或者，如果此插值位于某个元素中，则可以阻止元素呈现，直到存在数据。

 
 {{modello.lineaGialla.descrizione}}  

这两者正在做的是检查以确保lineaGialla是非虚假值。 如果是，则呈现数据。

渲染{{modello.lineaGialla}}时你没问题的原因是因为Vue不会渲染任何东西。 问题是当您尝试访问 undefined值的属性时。 每次都会爆炸。