Vue 2.1 метод вызова в beforeCreate hook не работает

Question

Я делаю асинхронный вызов для некоторых локальных json данных, прежде чем мой компонент будет создан. Так что этот код на самом деле работает отлично:

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

Теперь я просто хочу, чтобы реорганизовать и переместить это отдельный метод:

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

И теперь все перестает работать. Я получаю сообщение об ошибке: app.js:13 Uncaught TypeError: this.fetchUsers is not a function(…)

Почему я не могу получить доступ к методу fetchUsers в крюке beforeCreate? Какая работа?

Answer 1

Это потому, что methods еще не был инициализирован. Самый простой способ это использовать вместо этого:

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