Vue 2.1 calling method in beforeCreate hook is not working

Question

I am making an async call to some local json data before my component is created. So this code actually works fine:

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

Now I just want to refactor and move this to a separate method:

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

And now everything stops working. I get an error: app.js:13 Uncaught TypeError: this.fetchUsers is not a function(…)

Why can't I access the fetchUsers method in the beforeCreate hook? What is the work around?

score 31 · Accepted Answer · answered Nov 30 '16 at 14:11

31

It's because methods hasn't been initialized yet. The easiest way around this it to use the created hook instead:

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

answered Nov 30 '16 at 14:11

craig_h

31,871
6
59
68

Do you know where in the documentation I can read about this? – Amit Erandole Nov 30 '16 at 14:16
2

Yes, you can find out more here: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks – craig_h Nov 30 '16 at 14:17

Vue 2.1 calling method in beforeCreate hook is not working

1 Answers1