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

【问题标题】：Error getting JSON property in Vue js在 Vue js 中获取 JSON 属性时出错
【发布时间】：2017-06-17 14:19:33
【问题描述】：

我在使用 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: 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);
    });
  } 
})

会是什么？

【问题讨论】：

请同时发布渲染部分。

标签： javascript jquery json ajax vuejs2

【解决方案1】：

这里的问题是数据是异步检索的，这意味着当 Vue 首次呈现模板时，您的数据不存在。以下是事件的顺序：

created 生命周期事件被调用
您向服务器请求数据
Vue 生命周期完成，Vue首先在没有数据的情况下渲染
您的 ajax 数据调用完成
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 值时。每次都会爆炸。

【讨论】：