Vue axios中this的指向问题

最新推荐文章于 2024-07-05 17:28:33 发布
转载 最新推荐文章于 2024-07-05 17:28:33 发布 · 455 阅读 · 0

在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 942
先看一个例子： 在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 1013
问题背景 在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 667
在Vue由Vue管理的函数,尽量使用普通函数定义。不被Vue管理的函数，尽量使用箭头函数定义。这样保证this总是指向Vue实例，可以调用到Vue数据。
Vue中this的指向问题
qq_45647792的博客
06-05 1788
在下面的代码中，这里的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 1094
export default { name: 'HelloWorld', data () { return { msg:"原始值", } }, methods:{ testClick:function(){ let that=this;//this指vue实例 that.msg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs..
this指向问题以及如何改变指向
weixin_53954018的博客
07-05 1386
箭头函数的"this"是静态的，它捕获其定义时（而不是运行时）的上下文。因此，箭头函数通常不适合作为Vue组件中方法的定义方式，因为它无法访问Vue实例的数据和方法。：普通函数的"this"是在运行时动态绑定的，取决于函数的调用方式和上下文。Vue.js在模板和事件处理函数中自动绑定了组件实例，以便确保方法中的"this"指向正确。会指向当前的Vue实例，因为Vue在内部会确保方法被调用时绑定正确的上下文。方法创建一个新的函数，称为绑定函数，它会把指定的对象绑定为调用函数时的。
关于vue使用时this指向的问题,以及this指向的各种情况
tianjian_zhou的博客
09-17 6485
工作中经常会用到let _this = this;为什么要这么写呢？于是我决定在空闲时间一查究竟： this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文 在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等都适用）；构造函数...
vue let that = this的问题
axinxina的博客
05-08 440
vue 使用let that = this的问题
vue axios then
最新发布
01-24
### 如何在 Vue 中使用 Axios 的 `then` 方法处理响应 为了在 Vue 应用程序中利用 Axios 发起 HTTP 请求并处理服务器返回的数据，通常会遵循如下模式： 安装 Axios 后，在组件的方法部分定义一个用于发起请求的函数。此函数内调用 Axios 并链式调用 `.then()` 来指定当请求成功完成时应执行的操作。 ```javascript // 假设已经通过 npm 或者其他方式引入了 axios import axios from 'axios'; new Vue({ el: '#app', data() { return { messages: [], postDate: '' }; }, methods: { fetchMessages() { axios.get('/api/messages') // 使用相对路径或者完整的URL来获取消息列表 .then(function(response) { this.messages = response.data; console.log(this.messages); // 打印接收到的消息数据以便调试 }.bind(this)) // 绑定当前Vue实例给回调函数内的this, 确保能访问到data属性和其他methods方法[^3] .catch(function(error) { console.error("There was an error fetching the messages!", error); }); axios.post('/api/posts', { /* 提交的数据 */ }) .then(function(response) { this.postDate = response.data.datePosted || ''; console.log(`Post date received: ${this.postDate}`); // 处理帖子日期 }.bind(this)) .catch(function(error) { console.error("Failed to create a new post.", error); }); } }, mounted() { this.fetchMessages(); // 当组件挂载完成后立即尝试加载消息 } }); ``` 上述代码展示了两个不同的 API 调用——一个是 GET 请求用来检索信息；另一个 POST 请求则可能涉及提交新资源至服务器。每次成功的请求都会触发相应的`.then()`处理器，其中包含了更新视图所需的状态逻辑以及任何必要的日志记录语句。 值得注意的是，由于 JavaScript 的上下文特性，在箭头函数之外的地方（比如普通的匿名函数），`this` 关键字不会自动指向 Vue 实例。因此这里显式地绑定了 `this` 到每个 `.then()` 回调上以确保能够正确操作组件状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值