Axios not setting data

Question

I'm trying to set data from an axios response but it seems to me like "this" is only in the scope of the axios function. I have tried different variations of the same code that I've seen on other posts, but none are working.

data: () => ({
      storeKey: 'dayspanState',
      calendar: Calendar.months(),
      readOnly: false,
      defaultEvents: [],
      ticket_event: [],
}),

created(){
    this.get_tickets();
    console.log(this.ticket_event);
},

methods:
{
  get_tickets(){
     axios.get('/api/get_patching_tickets')
        .then(function (response) {
           this.ticket_event = response.data;
           }.bind(this));
  },
}

Second trial

created(){
        var self = this;
        axios.get('/api/get_patching_tickets')
        .then(function (response) {
           self.ticket_event = response.data;
           });
        console.log(this.ticket_event);            
}

Any help would be appreciated.

Do you have postman installed? Can you query the URL you are trying to call and see what the result is? the one which you pass to your axios call axios.get('/api/get_patching_tickets'... — Angelo
– Angelo, Commented Dec 17, 2019 at 19:43
yes, my route works, i even use the same axios functions in other components and it works too. that's why im confused. When i console.log(response.data) I get my routed data. i think its a variable scope issue — ZoneMeOut
– ZoneMeOut, Commented Dec 17, 2019 at 19:48
Can you try assigning a an array object value to your ticket_event variable. Then prior to getting the result on the axios.get call, do a console log and see the value. Then in your response, perform another console.log of the response.data object and see the values. Kindly post the console window with your question. — Angelo
– Angelo, Commented Dec 17, 2019 at 20:00
So you're telling that the Second trial doesn't work either? Have you checked your data with the Vue dev tool for Chrome/Firefox browser? And what does a console.log(response) return in the .then? — Jesper
– Jesper, Commented Dec 17, 2019 at 21:25

Ryan Charmley · Accepted Answer · 2019-12-17 23:46:28Z

3

Try rewriting your function like:

created(){
    axios.get('/api/get_patching_tickets')
    .then((response) => {
        this.ticket_event = response.data;
    }).finally(() => {
        console.log(this.ticket_event);
    });

    /* WARNING: the following console will not work as expected
    as the local value is set after the successful call
    while this is fired immediately after created is called
    */

    console.log(this.ticket_event);            
}

answered Dec 17, 2019 at 23:46

Ryan Charmley

1,13715 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Loi Nguyen Huynh · Accepted Answer · 2019-12-18 18:06:20Z

The callbacks you passed to .then in axios.get are fine. I see the only problem with your code is that it logs this.ticket_event right after calling this.get_tickets() - an asynchronous operation, so it'll not log the updated value after the api call finish because this.get_tickets() operates asynchronously:

this.get_tickets(); // is an async operation
console.log(this.ticket_event); // will not get the most updated value of this.ticket_event

Try this to see if it works:

data() {
  return {
      storeKey: 'dayspanState',
      calendar: Calendar.months(),
      readOnly: false,
      defaultEvents: [],
      ticket_event: [],
  }
},

methods: {
  get_tickets() {
     return axios.get('/api/get_patching_tickets')
        .then(response => {
           this.ticket_event = response.data;
        });
  }
},

created() {
    this.get_tickets().finally(() => {
        console.log(this.ticket_event);
    });
}

thank you for the explanation it is appreciated, but I got an Error in created hook: "TypeError: Cannot read property 'finally' of undefined"
@ZoneMeOut glad you found out your answer. About the error I have absolutely no idea how can it be undefined, I'm not sure if you copied exactly my code or just some part, but get_tickets returned an axios get, it should be a Promise, how could be undefined. If you use the version get_tickets of yours on the question, without a return like mine, it might be undefined.

Collectives™ on Stack Overflow

Axios not setting data

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related