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

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);
    });
  } 
})

在模板中，当我使用

{modello.lineaGialla}}

访问数据属性

lineaGialla

时，它会工作，但当我尝试访问嵌套属性，例如

{modello.lineaGialla.descripione}

时，控制台中会出现错误：

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 warn]：呈现函数中出错：“TypeError:无法读取未定义的属性“Descriptione”

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);
    });
  } 
})

这里是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);
      }
    });
  });
};

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

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

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生命周期完成，Vue第一次呈现时没有数据

您对数据的ajax调用完成

Vue重新渲染

这里的问题是第三步。尝试访问模板中的

descripione

属性时

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);
    });
  } 
})

{{modello.lineaGialla.descrizione}}

lineaGialla

未定义，因为尚未从服务器检索数据。因此，本质上，您试图读取

undefined

的

descripione

，这是一个javascript错误

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);
    });
  } 
})

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

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);
    });
  } 
})

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

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

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);
    });
  } 
})

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

{{modello.lineaGialla.descripione}}

这两种方法都在进行检查，以确保

lineaGialla

为非值。如果是，则呈现数据

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);
    });
  } 
})

---

渲染

{{modello.lineaGialla}}

时之所以可以，是因为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);
    });
  } 
})