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

时间:2022-02-20 17:37:30

之前项目中踩过的坑分享一下,项目框架当时选用的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