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

【问题标题】：Access Vue.js component property inside Ajax function在 Ajax 函数中访问 Vue.js 组件属性
【发布时间】：2016-09-05 02:20:55
【问题描述】：

以下代码引用了一个组件函数，它从 url 获取数据并尝试将该数据设置为属性。它不起作用，似乎 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 可访问？

【问题讨论】：

标签： jquery ajax vue.js

【解决方案1】：

从 ES6 开始也可以使用箭头函数，箭头函数不绑定自己的this，而是从父作用域继承一个，称为“词法作用域”。所以而不是

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

你可以的

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

【讨论】：

【解决方案2】：

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

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

我更喜欢绑定this，因为它看起来也更具可读性。

来自jQuery AJAX docs：

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

【讨论】：

【解决方案3】：

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

例如，您可以将this 保存到名为self 的变量中。然后在该方法内的任何地方使用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);
                }
        });
    }

【讨论】：

它对我有用，非常感谢。它被认为是好的做法还是一个好的技巧/技巧？
也适合我，但我也想知道哪种方法最好？
使用上面es6例子中的箭头函数绝对是最好的办法！

【解决方案4】：

你需要.bindthis上下文，因为回调不是在组件上下文中自然调用的：

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

【讨论】：