Vue axios中this的指向问题

最新推荐文章于 2024-01-25 14:55:32 发布
转载 最新推荐文章于 2024-01-25 14:55:32 发布 · 462 阅读 · 0

在Vue里this始终指向Vue，但axios中this为undefined。若要赋值给变量渲染数据，可通过=>函数让this指向Vue，也可将this保存在that中，在函数里使用that，博主分享了该问题的解决办法。

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

这里写图片描述

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

这里写图片描述

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

浅谈axios回调函数this------- var that = this；
weixin_45655291的博客
01-18 959
先看一个例子： 在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使用axios的回调函数中this不指向vue实例,为undefined
10-14
在Vue中使用axios库发送HTTP请求时，经常会遇到回调函数中this指向问题，特别是当使用axios.get或axios.post方法时，其then或catch回调函数中的this可能并不指向Vue实例。这就导致在回调函数中无法使用Vue实例的data...
详解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 1039
问题背景 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined。 如下图所示，我们有一个 login 方法，希望在登录成功之后路由到主页，但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数，ES6中的箭头函数 “=>” 内部的 this 属于词法作用域，由上下文确定（也就是由外层调用者vue来确定）。 ...
Vue.js 项目出现这个错误，别慌！
IT修真院：初学者转行到互联网的聚集地
02-18 954
作者简介： 李中凯老师，8年前端开发，前端负责人，擅长JavaScript/Vue。 公众号：1024译站 掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts 主要分享：Vue.js， JavaScript，CSS Vue.js 自从诞生以来，凭借它简洁优雅的 API、不错的性能和较低的学习门槛，赢得了广大前端开发...
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`要正确指向前端...
x264中open_file_yuv函数欣赏（顺便谈谈如何利用指针在被调函数中改变主调函数中变量的值）
认知 行动 坚持
12-13 8143
先来看一个结构体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中的this指向问题
qq_46199553的博客
10-21 1591
<!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 6954
在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值， 而箭头函数的this指向了window，不能获取到值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume...
Vue中this指向问题
胡云峰的博客
10-27 742
在Vue由Vue管理的函数,尽量使用普通函数定义。不被Vue管理的函数，尽量使用箭头函数定义。这样保证this总是指向Vue实例，可以调用到Vue数据。
vue的this指向问题
风清扬的专栏
01-25 1505
Vue中this关键字用于访问当前组件实例的属性和方法，默认指向当前组件实例，可以访问该实例的各种属性和方法，常见this指向改变的情况有：1、在回调函数中使用this时，this的指向可能会发生改变；在大多数情况下，this指向当前组件实例，可以直接访问组件的数据和方法。需要注意的是，如果在Vue的选项API之外的地方使用this，例如在setTimeout或setInterval等异步操作中，this的指向可能会丢失，此时应该使用箭头函数或将this保存到一个变量中。
Vue中this的指向问题
qq_45647792的博客
06-05 1852
在下面的代码中，这里的this指向对象vm，因而可以使用创建的Vue对象中的data内的数据及methods方法。</</</constnewVuedatareturnmsg'This 的指向'methodstestFnlog'msg'thistestFn;</</</
Vue解惑——axios中this的指向问题
一只彩乌鸦
09-11 9220
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 960
Vue入门基础用法
let that=this；vue保存this的指向，嵌套函数的this指向为window
m0_45260754的博客
04-26 1120
export default { name: 'HelloWorld', data () { return { msg:"原始值", } }, methods:{ testClick:function(){ let that=this;//this指vue实例 that.msg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs..
Vue笔记-在axios中的than函数中使用this需要注意的地方
IT1995的博客
12-11 1529
在Vue中，可以使用this关键字来访问到组件中定义的变量。然而，在axios的then函数中，this关键字的作用域会改变，会指向axios对象本身而不是Vue组件实例。使用箭头函数的好处是不需要额外保存this关键字的值，直接在then函数中使用this关键字来访问Vue组件的变量即可。解决这个问题的一种方法是将Vue组件中定义的变量保存到一个变量中，然后在axios的then函数中使用该变量。另外，也可以使用箭头函数来解决this关键字作用域的问题，因为箭头函数会继承父级作用域的this值。
Vue项目中axios的使用（基础篇）
weixin_40484820的博客
03-28 2985
通过使用Axios的请求拦截器和响应拦截器，我们可以轻松地处理请求和响应，并在出现错误时进行处理。在使用Axios调用API时，我们可以在API文件中定义一个函数，它使用Axios来发送HTTP请求并返回Promise对象。在成功的回调函数中，我们可以对请求进行一些处理，比如添加公共的请求头。在如上例子中，我们向请求中添加了一个Authorization请求头，它的值为getToken()函数的返回值。在Vue项目中，我们可以使用拦截器来添加公共的请求头、处理请求错误、处理响应错误等操作。
vue axios then
最新发布
01-24
值得注意的是，由于 JavaScript 的上下文特性，在箭头函数之外的地方（比如普通的匿名函数），`this` 关键字不会自动指向 Vue 实例。因此这里显式地绑定了 `this` 到每个 `.then()` 回调上以确保能够正确操作组件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值