1.解决办法

在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决。如下:


methods: {
loginAction(formName) {
this.$axios.post('http://127.0.0.1/u/subLogin', {
username: this.username,
password: this.password
})
.then(function(response){
console.log(this); //这里 this = undefined
})
.catch((error)=> {
console.log(this); //箭头函数"=>"使this指向vue
}); });
}
}

2. 原因

ES6中的 箭头函数 "=>" 内部的this是词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

3. 题外话

使用"=>"函数,就可以告别之前的两种写法了:

  1. bind(this)来改变匿名函数的this指向
  2. hack写法 var _this= this;


    loginAction(formName) {
    var _this= this;
    this.$axios.post("...")
    .then(function(response){
    console.log(_this); //这里 _this 指向vue
    }) });
    }

原文地址:https://segmentfault.com/a/1190000012533993

vue使用axios中 this 指向问题的更多相关文章

  1. vue在axios中 this 指向问题

    1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...

  2. Vue笔记:使用 axios 中 this 指向问题

    问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined. 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$r ...

  3. vue的爬坑之路-------axios中this的指向问题

    在自己的vue小项目中使用了axios这个插件,但是发现在axios请求数据成功之后的回调函数中this并不是指向当前vue实例, 在如下代码中 谷歌浏览器中报  this.goodsArr 未被定义 ...

  4. vue中使用Ajax(axios)、vue函数中this指向问题

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...

  5. axios中的this指向问题

    最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined. show (item) { let searchText = item.keyword console. ...

  6. nuxt或者vue,axios中如何发送多个请求

    在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) ...

  7. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

  8. Vue使用过程中常见问题

    目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...

  9. 6.Vue的Axios异步通信

    1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...

随机推荐

  1. BigDecimal相除异常

    使用两个BigDecimal类型的数字做除法运算时,出现了一个如下的异常信息: 1 java.lang.ArithmeticException: Non-terminating decimal exp ...

  2. C#调用webservice(一)

    最近一直在搞网络编程,这篇是关于webservice的,准备写两篇例子这篇是实现手机号码归宿地查询,下篇准备写实现机票查询. 这个网站(http://www.webxml.com.cn/zh_cn/i ...

  3. JS报错:Cannot read property 'type' of undefined

    在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误: Uncaught TypeError: Cannot rea ...

  4. c#.net 获取时间日期年月日时分秒生成自动文件名格式

    下面是日期和时间的各种方法,转换为字符串. 如果把输出的格式改下就可以做类似的文件名了,例如:2016010110101224356.doc  c#用DateTime.Now.ToString(&qu ...

  5. NOIp模拟赛三十

    心态崩了的一天 先Orz yrx 开场五分钟yrx大吼一声:“这B题不是原题吗” hjw:“对哦好像我也做过哦” 过了十分钟yrx又大吼一声:“这C题我也做过啊,洪水那题啊” 于是 像我这种傻逼A题一 ...

  6. javascript 继承之拷贝,原型,类式

    // 拷贝继承,在子类内调用父类并修正this指向,再通过for in 拷贝父类的方法实现继承,具体实现如下代码 : function Tab(){//父类构造函数 this.name='aaa'; ...

  7. [原创]关于javax.servlet.ServletException: File [/loginController/getVerifCode.jsp] not found异常 解决方案

    如果前台可以访问 后台并且有数据进行响应,那么一下方案也许可以帮到你... 修改前: 出现异常 javax.servlet.ServletException: File [/loginControll ...

  8. 带入gRPC:对 RPC 方法做自定义认证

    带入gRPC:对 RPC 方法做自定义认证 原文地址:带入gRPC:对 RPC 方法做自定义认证项目地址:https://github.com/EDDYCJY/go... 前言 在前面的章节中,我们介 ...

  9. Windows和Linux的编译理解

    Windows一般编译出来的x86的软件,就是只能在x86的系统上才能运行,同理,在x64系统上也是一样的道理. Linux利用gcc编译器编译,可以在Linux上面运行,但是想要在嵌入式系统上运行的 ...

  10. 2015 Multi-University Training Contest 3 hdu 5317 RGCDQ

    RGCDQ Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...