Trying to send an http get request using Vue js. Can't see any problems with the logic, not too experienced using vuejs though.

Keep getting 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('.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();
  }
});

Updated the code using vue resource, the errors are gone but it won't console log any data, what could be wrong?

Vue.use(VueResource);
var owm = new Vue({
  el: '#owm',
  data: {
    weather: []
  },
  methods: {
    loadWeather: function() {
      this.$http.get('.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();
  }
});

EDIT: This code works, don't really understand the .then function though and why the request won't work with the callback function but the .then function does.

this.$http.get('.5/find?q=stockholm&type=like&appid=[API KEY]').then((data) => {
  this.weather = data;
  console.log(this.weather);

Trying to send an http get request using Vue js. Can't see any problems with the logic, not too experienced using vuejs though.

Keep getting 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/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();
  }
});

Updated the code using vue resource, the errors are gone but it won't console log any data, what could be wrong?

Vue.use(VueResource);
var owm = new Vue({
  el: '#owm',
  data: {
    weather: []
  },
  methods: {
    loadWeather: function() {
      this.$http.get('http://api.openweathermap/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();
  }
});

EDIT: This code works, don't really understand the .then function though and why the request won't work with the callback function but the .then function does.

this.$http.get('http://api.openweathermap/data/2.5/find?q=stockholm&type=like&appid=[API KEY]').then((data) => {
  this.weather = data;
  console.log(this.weather);

• javascript
• http
• vue.js

• 1 check this, stackoverflow./questions/42387414/… – Casper Commented Nov 21, 2017 at 9:04
• But do not use vue-resorce package. It is deprecated now. Read this about alternatives: medium./the-vue-point/retiring-vue-resource-871a82880af4 – user6748331 Commented Nov 21, 2017 at 9:27
• installed vue resource and running : var Vue = require('vue'); Vue.use(require('vue-resource')); in the code, now i get the error saying "require is not defined" – Znowman Commented Nov 21, 2017 at 9:31

1 Answer 1

I tried a sample on my machine .you are using $http in wrong way. refer the docs.Since $http resolves a promise its callback can be handled inside a then function. This worked for me:

 loadWeather: function() {
    var self=this;
  this.$http.get('http://api.openweathermap/data/2.5/find?q=stockholm&type=like&appid=766b78c39446a8fa6313c3b7b2063ade').then(function(response){
    if(response.status == "200"){
        console.log(response);
    self.weather = response.data.list[0].weather // use self instead of this
    }


  })