Vue JS Datenobjekt nicht verfügbar in meinen Methoden

Question

Ich bin ein wenig verwirrt durch Vue JS und wie es funktioniert. Ich habe die folgende Komponente:

Vue.component('careers', { 
    template: ` 
    <div class="context"> 
    <div v-for="career in careerData"> 
     <h1>{{ career.fields.jobTitle }}</h1> 
     {{ career.fields.jobDescription }} 
    </div> 
    </div>`, 

    data: function() { 
    return { 
    careerData: [] 
    } 
    }, 

    created: function() { 
    this.fetchData(); 
    }, 

    methods: { 
    fetchData: function() { 
     client.getEntries() 
     .then(entries => { 
     this.careerData = entries.items; 
     }); 
     for (var i = 0, len = this.careerData.length; i < len; i++) { 
     console.log('Success'); 
     } 
    } 
    } 
}); 

Diese Zeile in meiner then() Funktion ein Array mit meinen Daten careerData Objekt zuweist.

this.careerData = entries.items 

Wenn ich versuche, dies zu laufen for:

for (var i = 0, len = this.careerData.length; i < len; i++) { 
    console.log('Success'); 
    } 

Es funktioniert nicht, weil this.careerData.length erscheint darin keine Daten zu haben, es ist nur ein leeres Array jedoch, wenn ich meine Komponente versuchen läuft innerhalb In meinem HTML werden die Daten perfekt auf der Seite angezeigt.

Irgendeine Idee, wo ich hier falsch gehen könnte, ist es, als ob ich this.careerData in keiner meiner Methoden verwenden kann. Irgendeine Idee, warum ich nicht auf diese Daten zugreifen kann, auch bekannt, habe ich es bereits in meiner fetchData Methode zugewiesen? Es ist sehr merkwürdig, dass die Daten es schaffen, perfekt zum Frontend zu kommen, aber ich kann es nirgendwo anders innerhalb meiner Methoden verwenden.

Danke, Nick

Answer 1

Sie führen die for-Schleife außerhalb des then und da es ein Asynchron-Operator, ist das Array immer noch leer, wenn Sie die Schleife laufen.

legte es in der then Funktion:

fetchData: function() { 
     client.getEntries() 
     .then(entries => { 
     this.careerData = entries.items; 

     for (var i = 0, len = this.careerData.length; i < len; i++) { 
      console.log('Success'); 
     } 
     }); 

    }