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

Posted 2023-02-22

【中文标题】在 Ajax 函数中访问 Vue.js 组件属性

【英文标题】：Access Vue.js component property inside Ajax function

【发布时间】：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 可访问？

【参考方案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