Axios not setting data - vue.js

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.

Answer 1

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

Answer 2

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