As I navigate through the world of Vue.js, I encounter a rather peculiar issue that has left me scratching my head ( at least in my humble opinion ).
Let's take a look at the code snippet:
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;
}
);
},
}
);
Upon execution of the created method, I observe the following output in the console:
https://i.sstatic.net/uvPtT.png
Nevertheless, the Vue console paints a different picture:
https://i.sstatic.net/oA9j3.png
Despite the normal execution of the created function, the updating of Vue data remains elusive.
Could it be that I've overlooked something? Regrettably, my eyes fail to detect any missteps.
Any thoughts or insights on how to tackle this predicament?
REMARKS
- The AJAX Request yields results
- I did attempt using
thisinstead oflet self = this;