Vue 2.1 méthode d'appel dans le hook beforeCreate ne fonctionne pas

Question

J'effectue un appel asynchrone vers des données locales json avant la création de mon composant. Donc, ce code fonctionne vraiment bien:

  beforeCreate : function() {
    var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
  },

Maintenant, je veux juste refactoriser et déplacer cela vers une méthode distincte:

  beforeCreate : function() {
    this.fetchUsers();
  },

  methods: {
    fetchUsers: function() {
      var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
    }
  }

Et maintenant, tout cesse de fonctionner. J'obtiens une erreur: app.js:13 Uncaught TypeError: this.fetchUsers is not a function(…)

Pourquoi ne puis-je pas accéder à la méthode fetchUsers dans le hook beforeCreate? Quel est le travail autour?

Answer 1

C'est parce que methods n'a pas encore été initialisé. La façon la plus simple de contourner ce problème consiste à utiliser le crochet created à la place:

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

  methods: {
    fetchUsers: function() {
      var self = this;
      fetch('/assets/data/radfaces.json')
        .then(function(response) { return response.json()
        .then( function(data) { self.users = data; } );
      })
        .catch(function(error) {
        console.log(error);
      });
    }
  }