关于vue的ajax中this作用域的问题

之前项目中踩过的坑分享一下，项目框架当时选用的vue，因为对ajax用法比较熟悉所以在vue中继续使用ajax没有使用axios，下面说遇到的问题以及解决办法：

vue中ajax中this默认指向对象是vue本身，当然你如果想在全局使用就要先把this作用域提升到全局          

 

 let that = this;

 

按正常来讲这时已经用这个that在ajax中取值传给vue视图了。

但是你会发现在vue中打印that是undefined，在ajax中this指向的是ajax本身。

解决方式：

methods: {　
    dataList() {
    var _self = this
        console.log(_self);//此处_self指向vue对象
        $.ajax({
           type: "post",
           url:url,
           async: true,
       data: {},
           dataType: "json",
       success: function(result) {
          _self.tableData = result;//这里的即为vue对象中tableData键值
          console.log(_self.tableData) 
　　　　　　}
        })      
    }
}                                                

打印结果即为后端接口数据json对象。

最后一步

data() {
    return {
        tableData: this.tableData,
    }
}

分享为例，并不是完整代码，有问题可以相互交流QAQ

 

转载于:https://www.cnblogs.com/posthxl/p/8126601.html