在Vue js中获取JSON属性时出错 [英] Error getting JSON property in Vue js

问题描述

我遇到了Vue的奇怪行为.我进行了ajax调用，将结果(一些JSON)存储到名为"modello"的Vue数据属性中.

I have encountered a strange behavior with Vue. I make an ajax call store the result (some JSON) to a Vue data property named: 'modello'.

{
  "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}}之类的嵌套属性时，在控制台中出现错误:

In the template, when I access the data property lineaGialla using {{modello.lineaGialla}} it works, but when I try to access a nested property, such as {{modello.lineaGialla.descrizione}}, I get an error in the console:

[Vue警告]:渲染功能出错:"TypeError:无法读取未定义的属性'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);
    });
  } 
})

那会是什么?

推荐答案

这里的问题是数据是异步检索的，这意味着当Vue首次渲染模板时，您的数据不存在.这是事件的顺序:

The problem here is data is retrieved asynchronously, meaning your data is not there when Vue first renders the template. Here is the sequence of events:

1. created生命周期事件称为
2. 您向服务器请求数据
3. Vue生命周期完成并且Vue是 first 无数据渲染
4. 您对数据的ajax调用完成
5. Vue重新提供

1. The created lifecycle event is called
2. You make a request to the server for data
3. Vue lifecycle completes and Vue is first rendered with no data
4. Your ajax call for data completes
5. Vue re-renders

这里的问题是步骤3.当您尝试访问模板中的descrizione属性

The problem here is step number 3. When you try to access the descrizione property in your template

{{modello.lineaGialla.descrizione}}

lineaGialla为undefined，因为尚未从服务器检索数据.因此，从本质上讲，您正在尝试阅读undefined的descrizione，这是一个JavaScript错误.

lineaGialla is undefined because the data is not yet retrieved from the server. So, in essence you are trying to read the descrizione of undefined and that is a javascript error.

在尝试访问可能不会立即填充的数据的属性之前，应做哪些检查以确保您拥有 数据.

What you should do check to make sure you have data before you try to access properties on data that may not be populated immediately.

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

或者，如果此插值在某个元素中，则可以阻止该元素渲染，直到有数据为止.

Alternately, if this interpolation is in some element, you can prevent the element from rendering until there is data.

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

这两种方法都在检查以确保lineaGialla不是非

What both of these are doing is checking to make sure that lineaGialla is a non falsy value. If it is, then it renders the data.

渲染{{modello.lineaGialla}}时您还可以的原因是，Vue不会渲染任何内容.问题是当您尝试访问一个undefined值的属性时.每次都会炸毁.

The reason you are OK when you render {{modello.lineaGialla}} is because Vue will just render nothing. The problem is when you try to access a property of an undefined value. That will blow up every time.

这篇关于在Vue js中获取JSON属性时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！