在 Ajax 函数中访问 Vue.js 组件属性

发布于05月10日

下面的代码引用了一个组件函数，该函数从url获取数据，并try 将该数据设置为属性.它不起作用，似乎this无法从ajax clousure范围访问.

var MyComp = Vue.extend({
props: {
        html_prop: {}
        ....
},
methods: {
        fetchCondiciones: function(url){

            $.ajax({
                    type: "GET",
                    url: url,
                    cache: false,
                    data: vardata ,
                    success: function(data,status,error) {
                        if( data!=''){
                            this.html_prop = data;
                        }
                    },
                    error: function(data,status,error){
                        alert(error);
                    }
            });

        }

        ...
    }
})

我怎样才能让this人进入？

推荐答案

您需要在this上下文中调用回调，因为回调不是在组件的上下文中自然调用的:

var MyComp = Vue.extend({
props: {
        html_prop: null,
},
        // ....
        fetchCondiciones: function(url){

            $.ajax({
                    type: "GET",
                    url: url,
                    cache: false,
                    data: vardata,
                    success: function(data,status,error) {
                        if(data != ''){
                            this.html_prop = data;
                        }
                    }.bind(this), // bind this here
                    error: function(data,status,error){
                        alert(error);
                    }.bind(this) // bind this here
            });

        }

        // ...
});

你可以在这里了解更多关于.bind和https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind的信息