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