VueJS http get request

Question

Vue jsを使用してhttp取得要求を送信しようとしています。しかし、vuejsを使用しても経験がない、ロジックに問題は見られません。

これら2つのエラーになってください：

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

と

VUEのリソースを使用してコードを更新しました

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

を、エラーがなくなっているが、それはすべてのデータを記録し、コンソールはありません、どのような間違っていますか？

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： このコードは動作しますが、実際にも.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); 

Answer 1

私のマシンでサンプルを試しましたが、間違った方法で$ httpを使用しています。 docs.Since $ httpが約束を解決するので、その関数内でそのコールバックを処理することができます。これが私の仕事：

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 
    } 


    })