I am new to Vue.js and I try to solve an issue that seems too strange ( at least to me ).
I have the following code:
import Vue from 'vue/dist/vue.js';
import axios from 'axios';
import './components/top-line';
new Vue(
{
el : '#weatherWidget',
data : {
loading : false,
error: '',
current : null,
daily : null,
},
created : () => {
let self = this;
let form_data = new FormData();
form_data.append( 'action', 'weather_request' );
form_data.append( 's', window.vue_weather.s );
self.loading = true;
self.error = '';
axios
.post( window.vue_weather.ajax_url, form_data )
.then(
response => {
let data = response.data;
self.current = data.data.currently;
self.daily = data.data.daily.data;
self.loading = false;
console.log( self );
}
)
.catch(
error => {
this.error = error;
}
);
},
}
);
And when the created method is executed, I can see in the console the following output:
But the Vue console seems like that:
Thus, while the created is executed normally, the Vue data is not updated.
Do you think I am doing anything wrong? Unfortunately, I cannot see something wrong.
Any solution or idea in order to solve the issue?
NOTES
- The AJAX Request returns data
- I have also tried the
thisinstead of thelet self = this;


created() {orcreated : function() {. See vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks