vue使用axios中 this 指向问题
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. 题外话
使用"=>"函数,就可以告别之前的两种写法了:
- bind(this)来改变匿名函数的this指向
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 指向问题的更多相关文章
- vue在axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- Vue笔记:使用 axios 中 this 指向问题
问题背景 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined. 如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$r ...
- vue的爬坑之路-------axios中this的指向问题
在自己的vue小项目中使用了axios这个插件,但是发现在axios请求数据成功之后的回调函数中this并不是指向当前vue实例, 在如下代码中 谷歌浏览器中报 this.goodsArr 未被定义 ...
- vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...
- axios中的this指向问题
最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined. show (item) { let searchText = item.keyword console. ...
- nuxt或者vue,axios中如何发送多个请求
在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) ...
- (vue.js)axios interceptors 拦截器中添加headers 属性
(vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...
- Vue使用过程中常见问题
目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...
- 6.Vue的Axios异步通信
1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...
随机推荐
- BigDecimal相除异常
使用两个BigDecimal类型的数字做除法运算时,出现了一个如下的异常信息: 1 java.lang.ArithmeticException: Non-terminating decimal exp ...
- C#调用webservice(一)
最近一直在搞网络编程,这篇是关于webservice的,准备写两篇例子这篇是实现手机号码归宿地查询,下篇准备写实现机票查询. 这个网站(http://www.webxml.com.cn/zh_cn/i ...
- JS报错:Cannot read property 'type' of undefined
在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误: Uncaught TypeError: Cannot rea ...
- c#.net 获取时间日期年月日时分秒生成自动文件名格式
下面是日期和时间的各种方法,转换为字符串. 如果把输出的格式改下就可以做类似的文件名了,例如:2016010110101224356.doc c#用DateTime.Now.ToString(&qu ...
- NOIp模拟赛三十
心态崩了的一天 先Orz yrx 开场五分钟yrx大吼一声:“这B题不是原题吗” hjw:“对哦好像我也做过哦” 过了十分钟yrx又大吼一声:“这C题我也做过啊,洪水那题啊” 于是 像我这种傻逼A题一 ...
- javascript 继承之拷贝,原型,类式
// 拷贝继承,在子类内调用父类并修正this指向,再通过for in 拷贝父类的方法实现继承,具体实现如下代码 : function Tab(){//父类构造函数 this.name='aaa'; ...
- [原创]关于javax.servlet.ServletException: File [/loginController/getVerifCode.jsp] not found异常 解决方案
如果前台可以访问 后台并且有数据进行响应,那么一下方案也许可以帮到你... 修改前: 出现异常 javax.servlet.ServletException: File [/loginControll ...
- 带入gRPC:对 RPC 方法做自定义认证
带入gRPC:对 RPC 方法做自定义认证 原文地址:带入gRPC:对 RPC 方法做自定义认证项目地址:https://github.com/EDDYCJY/go... 前言 在前面的章节中,我们介 ...
- Windows和Linux的编译理解
Windows一般编译出来的x86的软件,就是只能在x86的系统上才能运行,同理,在x64系统上也是一样的道理. Linux利用gcc编译器编译,可以在Linux上面运行,但是想要在嵌入式系统上运行的 ...
- 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 ...