Wie man Daten mit AJAX in Vuejs 2 rendert?

Question

Ich habe Probleme beim Versuch, Daten in einer Vue Instanz
(Beispiel in: https://jsfiddle.net/a5naw6f8/4/) setzen

ich die Werte zu Daten Eigenschaft von AJAX zuweisen. Ich kann Prüfung Objekt machen, aber wenn ich exam.questions.length zu einem inneren Array zugreifen möchten bekomme ich einen Fehler:

"TypeError: exam.questions is undefined"

Dies ist mein Code:

// .js 
new Vue({ 
    el: '#app', 
    data:{ 
     id: "1", 
     exam: {} 
    }, 
    created: function() { 
     this.fetchData(); 
    }, 
    methods: { 
     fetchData: function() { 
      $.get("https://dl.dropboxusercontent.com/s/15lkz66wy3fut03/data.json", 
       (data) => { 
        this.exam = data; 
       } 
      ); 
     } 
    } 
}); 

<!-- .html --> 
<div id="app"> 
    <h1>ID: {{ id }}</h1> 
    <h1>Exam: {{ exam }}</h1> 

    <!-- exam.questions array is undefined --> 
    <!-- <h1>Questions length: {{ exam.questions.length }}</h1> --> 
</div> 

gefunden ein ähnliches Problem, aber es war relativ zu diesem vorbehaltenen Wort Geltungsbereich: Vuejs does not render data from ajax

Kann jemand dieses Problem beheben?

Answer 1

Sie haben ein paar Probleme:

• Ihre JSON-Datei nicht gültig ist. Die abschließenden Kommas nach dem false veranlassen den Parser zu ersticken.

• Sie analysieren nicht Ihren JSON (deshalb haben Sie wahrscheinlich den JSON-Fehler nicht gesehen). Sobald Sie die JSON-Datei zu beheben, müssen Sie es mit so etwas wie this.exam = JSON.parse(data) eher analysieren als die Zeichenfolge this.exam Zuordnung

• Sobald Sie das tun, können Sie für das Objekt in der Vorlage testen mit v-if bevor Sie versuchen, seine Eigenschaften zuzugreifen:
  <h1 v-if="exam.questions">Questions length: {{ exam.questions.length }}</h1>

v-if den Versuch verhindern exam.questions.length zugreifen, bis die ajax-Request Daten