问题背景

在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。

如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。

解决方案

使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部的 this 属于词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

改成如下图所示,我们看到 this.router 已经正确的返回了路由器对象。

so, 遇到类似问题的朋友们,箭头函数用起来。


作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。

Vue笔记:使用 axios 中 this 指向问题的更多相关文章

  1. vue使用axios中 this 指向问题

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

  2. vue在axios中 this 指向问题

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

  3. vue笔记(更新中)

    1.禁止div点击 2.禁止选择 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; - ...

  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. Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  7. Vue+Typescript中在Vue上挂载axios使用时报错

    Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...

  8. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  9. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

随机推荐

  1. 解决Android Studio编译后安装apk报错:Error while Installing APK

    刚开始玩 Android ,用Android studio  连接真机做测试,在虚拟机上没有问题,但是真机就会报错 检查了好多地方,最终发现了问题,网上的常规就不介绍了,大家自己去看别的帖子 手机方面 ...

  2. Django 如何获取真实远程客户端IP

    问题简述 我们知道HttpRequest.META字典包含所有HTTP头部信息(可用的头部信息取决于客户端和服务器).一般情况下,HttpRequest.META.get('REMOTE_ADDR') ...

  3. 用idhttp打开网页或下载文件时如何显示进度

    在它的workbegin work事件中写代码 procedure TfrmDownLoad.IdHTTP1WorkBegin(Sender: TObject;   AWorkMode: TWorkM ...

  4. java基础:子类-父类构造器关系

    前提:父类:Parent.java 构造:默认构造方法(无参).带参数构造方法(并存时,需要显示创建无参构造方法) 例如:public Parent(){}.public Parent(String ...

  5. win10系统的“USB选择性暂停设置”怎么打开

    Win10系统自带的“USB选择性暂停设置”功能开启后会帮助我们节省电源,这一项功能对于笔记本来说用处很大.那么怎样才能打开这一功能呢?下面小编就来告诉大家打开“USB选择性暂停设置”功能的方法. 1 ...

  6. C#中@的作用

    1.在书写文件路径时,消除"/"的转义功能 string FileDirect = "C:\Text\Debug\Text.txt"; \\编译会报错 stri ...

  7. django 模型层(2)

    Django 模型层(2) 多表操作---模型之间的关系 1 一对一:作者----作者详细信息 2 一对多:书籍----出版社 3 多对多:书籍----作者 一  创建模型(主键(id)自动创建) 没 ...

  8. .NET CORE学习笔记系列(2)——依赖注入【2】基于IoC的设计模式

    原文:https://www.cnblogs.com/artech/p/net-core-di-02.html 正如我们在<控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式 ...

  9. 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 ...

  10. MYSQL primary key use btree 是什么含义了解一下

    CREATE TABLE `sth_definition` ( `id` int(11) NOT NULL AUTO_INCREMENT, `analyseId` bigint(20) DEFAULT ...