Why won't VueJS invoke methods from the created() function?

Question

Learning VueJS and trying to do a simple API call on component load to put a list of repos onto my page. When I call and set the this.repos from the created() method, no problem. But if I set it as a method and then call it from this.getRepos nothing happens. No error, nothing. What am I missing about VueJS?

This works:

data: () => ({
    msg: 'Github Repos',
    ok: 'Im practically giving away these repos',
    repos: [],
  }),
  methods: {
  },
  async created() {
    const repos = await axios.get('https://api.github.com/orgs/octokit/repos');
    this.repos = repos.data.map(repo =>
      `<div class="box"><a href="${repo.html_url}">
        ${repo.name}
      </div>`,
    );
  },

This DOES NOT work:

data: () => ({
    msg: 'Github Repos',
    ok: 'Im practically giving away these repos',
    repos: [],
  }),
  methods: {
    getRepos: async () => {
      const repos = await axios.get('https://api.github.com/orgs/octokit/repos');
      this.repos = repos.data.map(repo =>
        `<div class="box"><a href="${repo.html_url}">
          ${repo.name}
        </div>`,
      );
    },
  },
  created() {
    this.getRepos();
  },

Any ideas? Thanks!

Possible duplicate of [VueJS: why is "this" undefined?](https://stackoverflow.com/questions/43929650/vuejs-why-is-this-undefined) — Bert, Aug 23 '17 at 05:16

score 2 · Accepted Answer · edited Jul 15 '22 at 21:50

It's simply because you used arrow functions here so that this.repos's this is bound to window object. Changing async () => {} to async function() {} will help you overcome it.

See demo

Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.

reference

score 0 · Answer 2 · answered Aug 23 '17 at 16:01

Another way to do an Axios call with Vue using then() method:

demo

created() {
 axios.get('https://api.github.com/orgs/octokit/repos', {
   params: {
     type: 'all',
   },
 })
 .then((res) => {
   console.log('Success Response', res.data);
   res.data.forEach((repo) => {
     this.repos.push({ name: repo.name, url: repo.html_url, language: repo.language });
   });
 })
 .catch((err) => {
   console.log('Error', err);
 });
},

Why won't VueJS invoke methods from the created() function?

2 Answers2