javascript - 传递 vue-resource AJAX 数据

Question

我正在使用 Vue 资源，并尝试根据来自先前 AJAX 调用的（假定绑定的）数据进行 AJAX 调用。

我正在尝试将来自对 /me 的调用的数据绑定到userDetails道具（似乎工作正常），并将其传递给userDetails.id下一个函数（this.fetchMyProjects()）以获取该用户的项目。（不工作）。

当我将一个 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

这有效：

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

    },


}

});

Answer 2

你有一个错位)。 .bind()需要直接在函数上调用，在这种情况下在}：

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