ajax - update - El método de llamada Vue 2.1 en el gancho beforeCreate no funciona

vue js meta tags

Question

Estoy haciendo una llamada asíncrona a algunos datos json locales antes de que se cree mi componente. Entonces este código realmente funciona 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);
      });
  },

Ahora solo quiero refactorizar y mover esto a un método diferente:

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

Y ahora todo deja de funcionar. Me sale un error: app.js:13 Uncaught TypeError: this.fetchUsers is not a function(…)

¿Por qué no puedo acceder al método fetchUsers en el beforeCreate ? ¿Cuál es el trabajo?

Answer 1

Es porque los methods aún no se han inicializado. La forma más fácil de evitar esto es usar el gancho created :

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