vue-resource AJAXデータの周りを渡す

Question

私はVueリソースを使用していて、以前のAJAX呼び出しから来た（想定されている）データに基づいてAJAX呼び出しを作成しようとしています。

私は（OKを動作するようです）userDetails小道具に/私への呼び出しからデータをバインドしようとすると、そのユーザのプロジェクトを取得するには、次の関数（this.fetchMyProjects()）にuserDetails.idを渡しています。 （動作しません）。

私はIDをthis.fetchMyProjects()にハードコードします。それはうまくバインドされますが、問題はthis.userDetailsオブジェクトへの参照です。このコンテキストでは定義されていません。

私は縛られていると思われるプロパティにアクセスできない理由を理解していません。誰かが私が間違っていることについていくつかのガイダンスを提供できますか？

コード：

new Vue({ 
    el : 'body', 
    data : { 
     projects: [], 
     userDetails: {}, 
    }, 
    created : function(){ 

     this.fetchMyUserDetails(); 
     this.fetchMyProjects(); 

    }, 

    methods : { 

     fetchMyUserDetails : function(){ 

      this.$http.get('/me', function(resp){ 
       this.userDetails = resp.data; 
      }).bind(this); 

     }, 

     fetchMyProjects: function(){ 

      this.$http.get('/projects/user/' + this.userDetails.id, function(projects){ 
       this.projects = projects.data; 
      }).bind(this); 

     }, 


    } 

}); 

Answer 1

あなたは見当違い)を持っています。 .bind()は}に、この場合には、直接の関数で呼び出される必要がある：

this.$http.get('/me', function(resp){ 
    this.userDetails = resp.data; 
}.bind(this)); 

Answer 2

これは働いていた：

new Vue({ 
el : 'body', 
data : { 
    projects: [], 
    userDetails: {}, 
}, 
created : function(){ 

    this.fetchMyUserDetails(); 
    // this.fetchMyProjects(); // Needed to chain it into fetchMyUserDetails() 

}, 

methods : { 

    fetchMyUserDetails : function(){ 

     this.$http.get('/me', function(resp){ 
      this.userDetails = resp.data; 

      this.fetchMyProjects(); // Works! 

     }).bind(this); 

    }, 

    fetchMyProjects: function(){ 

     this.$http.get('/projects/user/' + this.userDetails.id, function(projects){ 
      this.projects = projects.data; 
     }).bind(this); 

    }, 


} 

});