Fehler beim Abrufen der JSON-Eigenschaft in Vue js

Question

Ich habe ein merkwürdiges Verhalten mit Vue festgestellt. Ich mache einen Ajax-Aufruf, der das Ergebnis (etwas JSON) in eine Vue-Dateneigenschaft namens "modello" speichert.

{ 
    "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} 
    ] 
    } 
} 

In der Vorlage, wenn ich Zugriff auf die Dateneigenschaft lineaGialla{{modello.lineaGialla}} mit es funktioniert, aber wenn ich versuche, eine verschachtelte Eigenschaft zuzugreifen, wie {{modello.lineaGialla.descrizione}}, erhalte ich einen Fehler in der Konsole:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"

Hier der Ajax Anruf.

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

Hier ist mein 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); 
    }); 
    } 
}) 

Was könnte es sein?

Answer 1

Das Problem hier ist, Daten asynchron abgerufen werden, was bedeutet, dass Ihre Daten nicht dort ist, wenn Vue zuerst die Vorlage rendert. Hier ist die Abfolge der Ereignisse:

1. Das created Lifecycle-Ereignis aufgerufen wird
2. Sie eine Anforderung von Daten an den Server
3. Vue Lebenszyklus vervollständigt und Vue ist ersten ohne Daten gemacht
4. Ihre ajax-Aufruf für Daten vervollständigt
5. Vue neu macht

T er Problem hierbei ist, Schritt Nummer 3. Wenn Sie die descrizione Eigenschaft in Ihrer Vorlage

{{modello.lineaGialla.descrizione}} 

lineaGialla ist undefined, weil die Daten zuzugreifen versuchen, ist noch nicht vom Server abgerufen. Also, im Wesentlichen versuchen Sie, die descrizione von undefined zu lesen, und das ist ein Javascript-Fehler.

Was Sie tun sollten, um sicherzustellen, dass Sie Daten haben, bevor Sie versuchen, auf Eigenschaften auf Daten zuzugreifen, die möglicherweise nicht sofort ausgefüllt werden.

Wenn diese Interpolation in einem Element ist, können Sie alternativ verhindern, dass das Element gerendert wird, bis Daten vorhanden sind.

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

Was diese beiden prüft tun, um sicherzustellen, dass lineaGialla ein nicht falsy Wert ist. Wenn dies der Fall ist, werden die Daten gerendert.

Der Grund, warum Sie OK sind, wenn Sie {{modello.lineaGialla}} rendern, ist, weil Vue nur nichts rendern wird. Das Problem ist, wenn Sie versuchen, Zugriff auf eine Eigenschaft eines undefined Wert. Das wird jedes Mal explodieren.