Wie kann ich Funktionen innerhalb eines Vue-Datenobjekts ausführen? Ich versuche, die folgende Komponente innerhalb Vue JS zu verwenden

Question

So:

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

    data: function() { 

    var careerData = []; 

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

    return careerData; 
    } 
}); 

Der folgende Code ein Fehler wie emittiert so:

[Vue warn]: data functions should return an object: 
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <careers>) 

aber wie man sehen kann ich ein foreach durch alle leite von meinem Contentful entries, dann wird jedes Objekt in den Einträgen zu einem Array geschoben, ich versuche dann, das Array zurückzugeben, aber ich bekomme einen Fehler.

Irgendeine Idee, wie ich alle meine entries zu meinem Datenobjekt innerhalb meiner Komponente extrahieren kann?

Wenn ich die client.getEntries() Funktion außerhalb meiner Vue Komponente verwenden, erhalte ich die folgenden Daten:

Answer 1

Auf diese Weise ist völlig falsch.

Als erstes zuerst - halten Sie Ihr Datenmodell so sauber wie möglich - also keine Methoden.

Die zweite Sache, wie Fehler sagt, wenn Sie mit Daten in die Komponente handelt, sollten die Daten Funktion sein, die ein Objekt zurückgeben:

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

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

Während ich dies schreibe, Abrufen von Daten und andere Logik sollte nicht in Modell, so dass ein Objekt dort, dass in VueJS reserviert ist genannt methods

so Ihre Logik in Verfahren bewegen, und wenn Sie Daten haben, können Sie es zu careerData zuweisen, indem zuweisen es so

this.careerData = newData 

oder Dinge Array schieben wie du before.And dann am Ende haben Sie Methode bei einigen Lebenszyklus Haken anrufen:

sagt

Vue.component('careers', { 
    template: '<div>A custom component!</div>', 

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

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

    methods: { 
    fetchData: function() { 
    // your fetch logic here 
    } 
    } 
});