VueJS, can't access "this" or "self" inside the same method

Question

currently I stuck on a problem for several hours. Sadly I haven't found a working solution on this by googling around the world.

The problem is, that I cant't access the "self" or "this" variable inside the same function after pulling the data from an api. I am just getting an 'undefined'.

getInvoice(){
  var self = this
  axios
    .get(url)
    .then(response => (self.invoice = response.data.data))

  console.log(self.invoice.invoice_nr) //undefined
},

Best regards and thanks in advance.

the `console.log` is going to fire before the callback in `then` — thanksd, Mar 13 '19 at 17:24

score 1 · Accepted Answer · answered Mar 13 '19 at 17:30

1

Firstly, this is not Vue JS issue.

Rest APIs are asynchronous in Javascript regardless of the framework you use.

Now, In order to access the data from Promise, you need to add it inside the .then function.

Have a look at Axios Docs

Promises

To get your data,

getInvoice(){
  var self = this
  axios
    .get(url)
    .then(response => {
        self.invoice = response.data.data;
        console.log(self.invoice.invoice_nr);
    })
},

Hope this helps!

answered Mar 13 '19 at 17:30

Varit J Patel

3,497
1
13
21

Thanks for your explenation. I think I have now an idea how to deal with such things. – Alex Mar 13 '19 at 18:54
Glad, I could help! – Varit J Patel Mar 13 '19 at 18:55

VueJS, can't access "this" or "self" inside the same method

1 Answers1