Vue-Ressource-AJAX-Daten übergeben um

Question

Ich verwende Vue-Ressource und versuche, einen AJAX-Aufruf basierend auf den (angeblich gebundenen) Daten zu machen, die von einem früheren AJAX-Aufruf stammten.

Ich versuche, die Daten von einem Aufruf/me an die userDetails prop zu binden (scheint gut zu funktionieren), und die userDetails.id in die nächste Funktion übergeben (this.fetchMyProjects()), die Benutzer-Projekte zu erhalten. (funktioniert nicht).

Wenn ich eine ID fest in this.fetchMyProjects() binde bindet es gut, das Problem ist der Verweis auf das Objekt this.userDetails - es ist undefined in diesem Zusammenhang.

Ich verstehe nicht, warum ich nicht auf eine Eigenschaft zugreifen kann, von der ich glaube, dass sie gebunden ist. Kann mir jemand eine Anleitung geben, was ich falsch mache?

Code:

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

Sie ein verlegtes ) haben. .bind() muss auf die Funktion direkt aufgerufen werden, in diesem Fall auf dem }:

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

Answer 2

Das funktionierte:

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

    }, 


} 

});