Question

以下代码是指一个组件函数，它从URL获取数据并尝试将该数据设置为属性。它不起作用，似乎无法从ajax clousure范围访问this。

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可以访问？

Answer 1

正如已经回答的那样，.bind将解决此问题，但是，我喜欢使用不同的方法，并在任何Ajax调用或嵌套函数之前将this存储在变量中。代码在方法内部增长时非常有用。它也更容易阅读。

例如，您可以将this保存到名为self的var中。然后在该方法内的任何位置使用self，没有问题。

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

        var self = this;

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

    }

    // ...
});

更新：

今天我们可以使用ES6箭头函数语法。

函数内this的值由周围范围决定，无需创建新变量或使用bind：

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

或者：

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

Answer 2

您需要.bind 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

Answer 3

您可以提供context选项并将其设置为this，如下所示：

$.ajax({
  context: this, 
  ..
})

我更喜欢绑定this，因为它似乎更具可读性。

来自jQuery AJAX docs：

所有回调中的this引用是设置中传递给context的{{1}}选项中的对象;如果未指定$.ajax，则context是对Ajax设置本身的引用。

Answer 4

自ES6以来，您还可以使用箭头函数，箭头函数不绑定自己的this，而是从父范围继承一个，即“词法作用域”。所以不是

//....                
  success: function(data,status,error) {
                        if( data!=''){
                            this.html_prop = data;
           }
  }
//...

可以做到

//....                
  success: (data,status,error) => {
                        if( data!=''){
                            this.html_prop = data;
            }
  }
//...

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

4 个答案: