Vue axios中this的指向问题

最新推荐文章于 2023-10-27 20:00:00 发布
最新推荐文章于 2023-10-27 20:00:00 发布
阅读量455 收藏
点赞数
分类专栏： javascript
在Vue里this始终指向Vue，但axios中this为undefined。若要赋值给变量渲染数据，可通过=>函数让this指向Vue，也可将this保存在that中，在函数里使用that，博主分享了该问题的解决办法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在Vue中this始终指向Vue，但axios中this为undefined，例如

这里写图片描述

若需要赋值给变量用以渲染数据，可以通过=>函数，这时this为Vue

这里写图片描述

或者可以直接通过： 
let that = this 
将this保存在that中，再在函数中使用that均可 
被坑了很久，一直打印出来undefined，终于解决了

浅谈axios回调函数this------- var that = this；
weixin_45655291的博客
01-18 941
先看一个例子： 在methods中，可以用this.city获取到data中的city数据，**但是在axios的then函数中，this回调值发生了变化，返回值为undefined **。所以在axios函数外面使用 var that = this；保存this指向。 var app = new Vue({ el:"#app", data:{ city:'武汉', weatherList:[], }, methods:{ se
详解vue中的computed的this指向问题
11-28
今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下 1.箭头函数中的this 箭头函数内部的this是词法作用域，由上下文确定 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象 2.vue中的computed 使用箭头函数 list: () => { console.log(this) } 不使用箭头函数 allFigure: function() { console.log(this) }, 使用get() allFigure: { get() { console.log(this);
Vue笔记：使用 axios 中 this 指向问题
朝雨忆轻尘
08-25 1011
问题背景 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined。 如下图所示，我们有一个 login 方法，希望在登录成功之后路由到主页，但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数，ES6中的箭头函数 “=>” 内部的 this 属于词法作用域，由上下文确定（也就是由外层调用者vue来确定）。 ...
Vue.js 项目出现这个错误，别慌！
IT修真院：初学者转行到互联网的聚集地
02-18 874
作者简介： 李中凯老师，8年前端开发，前端负责人，擅长JavaScript/Vue。 公众号：1024译站 掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts 主要分享：Vue.js， JavaScript，CSS Vue.js 自从诞生以来，凭借它简洁优雅的 API、不错的性能和较低的学习门槛，赢得了广大前端开发...
x264中open_file_yuv函数欣赏（顺便谈谈如何利用指针在被调函数中改变主调函数中变量的值）
认知 行动 坚持
12-13 8122
先来看一个结构体yuv_input_t： typedef struct { FILE *fh; int width, height; int next_frame; } yuv_input_t; yuv_input_t结构体用fh这个文件指针打开原始的yuv文件foreman_qcif.yuv. 但程序中，必须知道yuv文件中视频的尺寸（widt
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
vue使用axios时关于this的指向问题详解
11-27
本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。 1.解决办法 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined，可以使用箭头函数”=>”来解决...
Vue axios 跨域请求无法带上cookie的解决
10-14
总之，解决Vue axios跨域请求无法携带cookie的问题，需要前端设置`axios.defaults.withCredentials = true`，后端设置`Access-Control-Allow-Credentials: true`，并且`Access-Control-Allow-Origin`要正确指向前端...
vue中的this指向问题
qq_46199553的博客
10-21 1577
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script src="https://unpkg.com/vue@2.5.9/dist/vue.j
Vue中this指向的问题
诗酒趁年华
05-09 6940
在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值， 而箭头函数的this指向了window，不能获取到值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume...
Vue中this指向问题
胡云峰的博客
10-27 664
在Vue由Vue管理的函数,尽量使用普通函数定义。不被Vue管理的函数，尽量使用箭头函数定义。这样保证this总是指向Vue实例，可以调用到Vue数据。
Vue中this的指向问题
qq_45647792的博客
06-05 1787
在下面的代码中，这里的this指向对象vm，因而可以使用创建的Vue对象中的data内的数据及methods方法。</</</constnewVuedatareturnmsg'This 的指向'methodstestFnlog'msg'thistestFn;</</</
Vue解惑——axios中this的指向问题
一只彩乌鸦
09-11 9179
Vue——axios中this的指向问题 场景 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在进行Vue实验时，需要用到axios进行接口请求，并将返回的内容传递到Vue的data选项中。正常情况下，会使用this.list = response.data的格式进行赋值，但this的指向恰恰是最容易被忽略的地方。 出现的问题： 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而指向其它地方的情况。如下图所示： 通过在网络上搜索，有很
Vue基础
这里是Cikian，分享原创博客@www.cikian.cn
04-02 937
Vue入门基础用法
let that=this；vue保存this的指向，嵌套函数的this指向为window
m0_45260754的博客
04-26 1093
export default { name: 'HelloWorld', data () { return { msg:"原始值", } }, methods:{ testClick:function(){ let that=this;//this指vue实例 that.msg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs..
＜Zhuuu_ZZ＞HIVE(十一)函数
Zhuuu_ZZ的博客
09-22 2734
Hive内置函数一 Hive函数分类二 字符函数二 类型转换函数和数学函数三 日期函数四 集合函数五 条件函数六 聚合函数和表生成函数6.1 聚合函数6.2 表生成函数：输出可以作为表使用 一 Hive函数分类 从输入输出角度分类 标准函数：一行数据中的一列或多列为输入，结果为单一值 聚合函数：多行的零列到多列为输入，结果为单一值 表生成函数：零个或多个输入，结果为多列或多行 从实现方式分类 内置函数 自定义函数 UDF：自定义标准函数 UDAF：自定义聚合函数 UDTF：自定义表生成函数
vue使用axios后，访问不到this中的变量
热门推荐
archer的技术故事
03-21 1万+
本文主要针对vue中使用axios进行与后台交互后，从后台拿到数据绑定到前台的时候发现绑定不上的问题进行处理。下面是出现问题的代码：testget: function () { this.$ajax({ method: 'get', url: 'zk/connect?connectionString=' + this.connec...
axios的this指向_vue使用axios时关于this的指向问题详解
weixin_39772420的博客
12-20 1125
前言众所周知axios是vue-resource后出现的vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。更多的详细介绍大家可以参考这里：本文主要介绍了关于vue使用axios时this的指向问题，下面话不多说了，来一起看看详细的介绍吧。1.解决办法在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为unde...
vue axios then
最新发布
01-24
值得注意的是，由于 JavaScript 的上下文特性，在箭头函数之外的地方（比如普通的匿名函数），`this` 关键字不会自动指向 Vue 实例。因此这里显式地绑定了 `this` 到每个 `.then()` 回调上以确保能够正确操作组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值