VueJS http get request

Question

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

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

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.org/data/2.5/find?q=stockholm&type=like&appid=[API KEY]').then((data) => {
  this.weather = data;
  console.log(this.weather);

But do not use vue-resorce package. It is deprecated now. Read this about alternatives: medium.com/the-vue-point/retiring-vue-resource-871a82880af4 — user6748331
– 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
– Znowman, Commented Nov 21, 2017 at 9:31

Manav Mandal · Accepted Answer · 2017-11-23 07:22:58Z

8

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.org/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
    }


  })

edited Nov 23, 2017 at 7:22

answered Nov 21, 2017 at 18:02

Manav Mandal

3251 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Znowman Over a year ago

Still not getting any data

Manav Mandal Over a year ago

Are you able to make the request successfully?? or do you get any error while sending the request ? can you send the screenshot of response from network panel in debug tool.

Znowman Over a year ago

Getting no errors with the request, but no data returned either

Znowman Over a year ago

Ran your code, still not returning any data. This code works for me though this.$http.get('api.openweathermap.org/data/2.5/find?q=' + this.userInput + this.apiKey).then((data) => {}, but not familiar with what the .then function does.

Collectives™ on Stack Overflow

VueJS http get request

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related