Vue笔记:使用 axios 中 this 指向问题
问题背景
在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。
如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。
解决方案
使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部的 this 属于词法作用域,由上下文确定(也就是由外层调用者vue来确定)。
改成如下图所示,我们看到 this.router 已经正确的返回了路由器对象。
so, 遇到类似问题的朋友们,箭头函数用起来。
作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。
Vue笔记:使用 axios 中 this 指向问题的更多相关文章
- vue使用axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- vue在axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- vue笔记(更新中)
1.禁止div点击 2.禁止选择 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; - ...
- 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. ...
- Vue笔记:使用 axios 发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- Vue+Typescript中在Vue上挂载axios使用时报错
Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
随机推荐
- 解决Android Studio编译后安装apk报错:Error while Installing APK
刚开始玩 Android ,用Android studio 连接真机做测试,在虚拟机上没有问题,但是真机就会报错 检查了好多地方,最终发现了问题,网上的常规就不介绍了,大家自己去看别的帖子 手机方面 ...
- Django 如何获取真实远程客户端IP
问题简述 我们知道HttpRequest.META字典包含所有HTTP头部信息(可用的头部信息取决于客户端和服务器).一般情况下,HttpRequest.META.get('REMOTE_ADDR') ...
- 用idhttp打开网页或下载文件时如何显示进度
在它的workbegin work事件中写代码 procedure TfrmDownLoad.IdHTTP1WorkBegin(Sender: TObject; AWorkMode: TWorkM ...
- java基础:子类-父类构造器关系
前提:父类:Parent.java 构造:默认构造方法(无参).带参数构造方法(并存时,需要显示创建无参构造方法) 例如:public Parent(){}.public Parent(String ...
- win10系统的“USB选择性暂停设置”怎么打开
Win10系统自带的“USB选择性暂停设置”功能开启后会帮助我们节省电源,这一项功能对于笔记本来说用处很大.那么怎样才能打开这一功能呢?下面小编就来告诉大家打开“USB选择性暂停设置”功能的方法. 1 ...
- C#中@的作用
1.在书写文件路径时,消除"/"的转义功能 string FileDirect = "C:\Text\Debug\Text.txt"; \\编译会报错 stri ...
- django 模型层(2)
Django 模型层(2) 多表操作---模型之间的关系 1 一对一:作者----作者详细信息 2 一对多:书籍----出版社 3 多对多:书籍----作者 一 创建模型(主键(id)自动创建) 没 ...
- .NET CORE学习笔记系列(2)——依赖注入【2】基于IoC的设计模式
原文:https://www.cnblogs.com/artech/p/net-core-di-02.html 正如我们在<控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式 ...
- How To Size Your Apache Flink® Cluster: A Back-of-the-Envelope Calculation
January 11, 2018- Apache Flink Robert Metzger and Chris Ward A favorite session from Flink Forward B ...
- MYSQL primary key use btree 是什么含义了解一下
CREATE TABLE `sth_definition` ( `id` int(11) NOT NULL AUTO_INCREMENT, `analyseId` bigint(20) DEFAULT ...