web-dev-qa-db-ja.com

VueJS http getリクエスト

Vue js。

次の2つのエラーが引き続き発生します。

[Vue警告]：マウントされたフックのエラー： "TypeError：未定義のプロパティ 'get'を読み取れません"

そして

TypeError：未定義のプロパティ「get」を読み取ることができません。

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

vueリソースを使用してコードを更新しました。エラーはなくなりましたが、コンソールはデータをログに記録しません。何が問題なのでしょうか？

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

編集：このコードは機能しますが、実際には.then関数を理解していないため、要求がコールバック関数では機能しないが、.then関数では機能する理由を理解してください。

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);
javascripthttpvue.js
6
Znowman

私は自分のマシンでサンプルを試しました。あなたは間違った方法で$ httpを使用しています。 docsを参照してください。$ httpはプロミスを解決するため、コールバックはthen関数内で処理できます。これは私のために働いた：

 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
    }


  })
5
Manav Mandal