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. Codeforces 988F. Rain and Umbrellas

    解题思路:动态规划 遍历点i,如果从前一个点i-1走到这个点i不需要伞,则疲劳值不变dp[i] = dp[i-1]. 如果前一个点i-1走到这一个点i需要伞,则从前面找一把伞. 即遍历前面的每个点j, ...

  2. 51nod 1110 距离之和最小V3

    X轴上有N个点,每个点除了包括一个位置数据X[i],还包括一个权值W[i].点P到点P[i]的带权距离 = 实际距离 * P[i]的权值.求X轴上一点使它到这N个点的带权距离之和最小,输出这个最小的带 ...

  3. javascript中的正则示例

    // 方式一var obj_re = new RegExp("\d+","gi"); //g 全局,i 不区分大小写obj_re.test("fasf ...

  4. VB学习笔记(一)VB操作字符串

    在vb中 dim a# 定义a变量为双精度型变量~ #是类型符 % 整型 & 长整型 !单精度 $ 字符型 VB中strconv 的作用 StrConv("要转换的字符串" ...

  5. 有趣的console

    博文第一篇,就以前端调试的“座上客”---console开始

  6. 带入gRPC:gRPC Deadlines

    带入gRPC:gRPC Deadlines 原文地址:带入gRPC:gRPC Deadlines项目地址:https://github.com/EDDYCJY/go... 前言 在前面的章节中,已经介 ...

  7. vuejs--递归组件(树型表格分享)

    前言    前段时间使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 递归组件    组件在它的模板内可以递归地调用 ...

  8. Android群英传-拼图游戏puzzle-代码设计和实现

    上个周末,3个小时总体上读完了<Android群英传>,本周主要在研究代码层次的设计和实现.  编译安装在手机上,玩了几把,结合代码,一周时间才掌握了整体的思路.  大部分时间,其实花在了 ...

  9. 常见VPS buy地址

    ***,也是最适合新手使用的: https://bwh1.net/ (支持支付宝) vultr,以下是我的分享链接: https://www.vultr.com/(支持支付宝) SugarHosts: ...

  10. 【codeforces 496E】Distributing Parts

    [题目链接]:http://codeforces.com/contest/496/problem/E [题意] 给你n个歌曲; 每个歌曲有一个需要声音的区间li,ri; 然后给你m个人; 每个人也有一 ...