Ошибка получения свойства JSON в Vue js

Я столкнулся со странным поведением с Vue. Я делаю вызов ajax, чтобы сохранить результат (некоторый JSON) в свойство данных Vue с именем: «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}
    ]
  }
}

В шаблоне, когда я обращаюсь к свойству данных lineaGialla с помощью {{modello.lineaGialla}}, он работает, но когда я пытаюсь получить доступ к вложенному свойству, такому как {{modello.lineaGialla.descrizione}}, я получаю сообщение об ошибке в консоли:

[Предупреждение Vue]: ошибка в функции рендеринга: «Ошибка типа: невозможно прочитать описание свойства неопределенного»

Здесь вызов 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);
    });
  } 
})

Что бы это могло быть?


javascript json jquery ajax vuejs2
person Pds Ink    schedule 17.06.2017    source источник
comment
Пожалуйста, опубликуйте также часть рендера.   -  person Dan Philip    schedule 17.06.2017

Ответы (1)


arrow_upward
2
arrow_downward

Проблема здесь в том, что данные извлекаются асинхронно, то есть ваших данных нет, когда Vue впервые отображает шаблон. Вот последовательность событий:

  1. Событие жизненного цикла created вызывается
  2. Вы делаете запрос на сервер для данных
  3. Жизненный цикл Vue завершается, и Vue сначала отображается без данных
  4. Ваш вызов ajax для данных завершен
  5. Vue повторно рендерит

Проблема здесь в шаге номер 3. Когда вы пытаетесь получить доступ к свойству descrizione в вашем шаблоне

{{modello.lineaGialla.descrizione}}

lineaGialla равно undefined, поскольку данные еще не получены с сервера. Итак, по сути, вы пытаетесь прочитать descrizione из undefined, и это ошибка JavaScript.

Что вам следует сделать? Убедитесь, что у вас есть данные, прежде чем пытаться получить доступ к свойствам данных, которые могут быть заполнены не сразу.

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

В качестве альтернативы, если эта интерполяция находится в каком-то элементе, вы можете запретить рендеринг элемента до тех пор, пока не появятся данные.

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

Оба они проверяют, что lineaGialla не является falsy< /а> значение. Если это так, то он отображает данные.

Причина, по которой у вас все в порядке при рендеринге {{modello.lineaGialla}}, заключается в том, что Vue просто ничего не рендерит. Проблема возникает, когда вы пытаетесь получить доступ к свойству со значением undefined. Это будет взрываться каждый раз.

person Bert    schedule 17.06.2017