web-dev-qa-db-fra.com

Comment exécuter des fonctions dans un objet de données Vue?

J'essaie donc d'utiliser le composant suivant dans Vue JS:

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

Le code suivant émet une erreur comme ceci:

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

Cependant, comme vous pouvez le voir, j'exécute un foreach à travers tous mes Contentful entries, puis chaque objet dans les entrées est poussé vers un tableau, j'essaie ensuite de retourner le tableau mais j'obtiens une erreur.

Avez-vous une idée de comment extraire tout mon entries vers mon objet de données dans mon composant?

Lorsque j'utilise la fonction client.getEntries() en dehors de mon composant Vue, j'obtiens les données suivantes:

enter image description here

javascriptvue.jsvue-component
9
Nick Maddren

Cette façon est totalement fausse.

Tout d'abord - gardez votre modèle de données aussi propre que possible - donc pas de méthode.

Deuxièmement, comme le dit l'erreur, lorsque vous traitez des données dans un composant, les données doivent être une fonction qui renvoie un objet:

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

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

Au moment où j'écris, l'extraction de données et d'autres logiques ne devraient pas être dans les données, il y a un objet réservé pour cela dans Vue.js appelé methods.

Déplacez donc votre logique dans les méthodes, et lorsque vous avez reçu les données, vous pouvez les affecter à careerData comme ceci:

this.careerData = newData

ou Poussez les choses dans le tableau comme vous l'avez fait auparavant. Et puis à la fin, vous pouvez appeler la méthode sur certains hooks du cycle de vie:

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

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

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

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