Vue JS v-für keine Iteration über Array

Question

Hallo Leute, ich benutze Vue JS, um zu versuchen, meine Daten zu durchlaufen. Hier ist meine ganze JS-Datei:

var contentful = require('contentful'); 

var client = contentful.createClient({ 
    space: 'HIDDEN', 
    accessToken: 'HIDDEN' 
}); 

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

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

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

    methods: { 
    fetchData: function() { 
    client.getEntries() 
    .then(function (entries) { 
     // log the title for all the entries that have it 
     entries.items.forEach(function (entry) { 
     if(entry.fields.jobTitle) { 
      this.careerData = entries.items; 
     } 
     }) 
    }); 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app' 
}); 

I Methoden verwenden einige Daten aus gehalt zugreifen zu können, sobald sie die erforderlichen Daten gepackt hat es zu meinem Datenobjekt gesendet wird.

Wenn ich console.log(careerData); in meiner Konsole folgende Daten zurückgegeben:

Also würde ich erwarten, wenn ich v-for in meiner Vorlage verwendet und versuchte, über careerData laufen würde es machen richtig aber auf meiner Front -Ende ich bin mit einem leeren div links wie folgt:

<div id="app"><div></div></div> 

ich zur Zeit meine Komponente in meine HTML bin ziehen wie so:

<div id="app"> 
    <careers></careers> 
</div> 

In meiner Konsole werden keine Fehler angezeigt. Können Sie sich irgendeinen Grund dafür vorstellen?

Danke, Nick

Answer 1

Mehrere Probleme, die ich denke. Wie @dfsq sagte, sollten Sie eine Pfeilfunktion verwenden, wenn Sie den Kontext beibehalten möchten (this).

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

Dann können Sie {{fields.jobDescription}} durch {{career.fields.jobDescription}} ersetzen, wie @unholysheep schrieb.

Es kann funktionieren. Wenn dies nicht der Fall ist, können Sie eine this.$forceUpdate(); direkt nach this.fetchData();

Answer 2

Pfeil Funktion in forEach Rückruf, so dass Sie nicht verlieren Kontext tun:

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