Question

我遇到了Vue的奇怪行为。我将一个ajax调用存储结果（一些JSON）存储到一个名为的＆＃39; modello＆＃39;的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警告]：渲染功能出错：＆＃34; TypeError：无法读取属性＆＃39; descrizione＆＃39;未定义＆＃34;

这里是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首次呈现模板时，您的数据不存在。以下是事件序列：

created生命周期事件称为
您向服务器请求数据
Vue生命周期完成，Vue 首先呈现，没有数据
您的ajax数据调用已完成
Vue重新渲染

此处的问题是第3步。当您尝试访问模板中的descrizione属性时

{{modello.lineaGialla.descrizione}}

lineaGialla为undefined，因为尚未从服务器检索数据。所以，从本质上讲，您正在尝试阅读descrizione的{{1}}，这是一个javascript错误。

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

undefined

或者，如果此插值位于某个元素中，则可以阻止元素渲染，直到有数据。

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

这两项工作正在检查以确保<div v-if="modello.lineaGialla"> {{modello.lineaGialla.descrizione}} </div>是非falsy值。如果是，则呈现数据。

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

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

1 个答案: