Attempting to make an http get request using Vue js. I can't seem to find any issues with the logic, although I'm not very experienced with vuejs.
Continuously encountering these two errors:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"
and
TypeError: Cannot read property 'get' of undefined.
var owm = new Vue({
el: '#owm',
data: {
debug: true,
weather: []
},
methods: {
loadWeather: function() {
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=766b78c39446a8fa6313c3b7b2063ade', function(data, status, request){
if(status == 200)
{
this.weather = data;
console.log(this.weather);
}
});
}
},
mounted: function () {
this.loadWeather();
}
});
After updating the code using vue resource, the errors have disappeared but the data is not being logged in the console, what could be the issue?
Vue.use(VueResource);
var owm = new Vue({
el: '#owm',
data: {
weather: []
},
methods: {
loadWeather: function() {
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=[API KEY]', function(data, status, request){
if(status == 200)
{
this.weather = data;
console.log(this.weather);
}
});
}
},
mounted: function () {
this.loadWeather();
}
});
UPDATE: This revised code functions as expected, although I'm unsure about the .then function and why it worked with it instead of the callback function.
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=[API KEY]').then((data) => {
this.weather = data;
console.log(this.weather);