在vue中axios的post请求返回的数据赋值给data()中的变量出现未定义的问题

最新推荐文章于 2025-06-12 15:37:41 发布
原创 最新推荐文章于 2025-06-12 15:37:41 发布 · 1w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #axios

本文探讨了在使用axios进行请求时，在then方法中访问data()定义的变量导致未定义错误的问题。详细解释了原因在于then中的this指向问题，并提出使用箭头函数作为解决方案。

首先我们看data()定义的变量

 

然后我们在axios请求的then中取值

这时候就会出现downdata未定义的错误，这是因为在then中this就是指向当前的对象，而无法引用data()中的变量，因此使用箭头函数就可以解决

Vue中常见问题汇总及解决方案（二）
小刘哥的博客
07-30 803
检查你是否在 Vue 实例中引用了一个未定义或未注册的组件。确保在引用组件之前,你已经正确地定义和注册了该组件。
vue2 更改data里的变量不生效时，深层更改data里的变量
全易
01-08 4426
如下图，当data里的数据多层嵌套 要改变深层某条数据却不生效时： this.$set(this.schoolBag[0].bagData[2],'value','666'); 解释： 设置第一个schoolBag数组里 的第三个bagData里 的value为666 ...
axios使用心得总结
weixin_33918357的博客
11-28 565
Axios是一个基于Promise的 HTTP 库，可以用在浏览器和node.js 中，因为尤大大的推荐，axios也变得越来越流行。最近项目中使用axios也遇到了一些问题，就借此机会总结一下，如有错误，还请不吝指正。 功能 浏览器端发起XMLHttpRequests请求 node层发起http请求 支持Promise API 拦截...
解决vue中v-if绑定data里的数据提示未定义的问题（网上找了好几种方法都不符合，后来自己研究出来的）
qq_39153893的博客
04-15 3750
情况1：网上有些人是data（）里面没定义变量aa 情况2:(但是我的不一样)，<button v-if="aa",这个aa能读取到。 但是<a v-if="aa" ,但是这个aa说没定义。对比发现，应该是a标签加载比data ()加载顺序早，所以改成 <span v-if="aa" ><a> </span>,用span（或者用其他也行，如div等...
Axios传值的几种方式
pachupingminku的博客
11-19 4017
注意：get请求无请求体，可以有body,但是不建议带。使用get方式请求，拼接多个参数在路径中：方式③。使用get方式请求，参数拼接在路径中：方式①。使用get方式请求，参数拼接在路径中：方式②。使用get方式请求，参数值直接放在路径中。get有参请求,post方式不可以这样请求。post有参请求，以json格式请求。使用get方式进行无参请求。
axios常见传参方式及基本使用
热门推荐
Don't disturb me!的博客
08-10 2万+
1:get请求 一般发送请求是这么写 axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res); }).catch(function (err) { console.log(err); }); 但是为了方便全局统一调用封装的axios axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以 params: { id:
关于使用vue时在data定义的变量undefined问题
PleaseBeStrong的博客
07-07 1544
明明在data中定义了数据，但是页面却不显示（连静态内容都没有加载出来）.经过排查发现，data中有一项新加入的变量没有赋初始值，导致一系列报错的产生
vue中data没有定义的数据无法实现 数据双向绑定
felicity_zll的博客
04-13 1455
1、 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <span>这是一段信息</span> <input type="text" v-model="test.name"> <h1>{{test.name}
vue给data中已定义的变量用this赋值报错问题（TypeError: Cannot set property ‘catalogTable_body‘ of undefined）
Maybe_ss的博客
03-29 1579
问题描述 下面是一个简单的文件上传功能，data里面申明的catalogTable_body，在下面的catalogUpload()函数里面用this调用的时候，会报错未定义catalogTable_body。 这是因为用了 function函数的原因，在函数里面，this是指向函数本身，已经不是外部的默认this了。 export default { name: "catalog", data() { return {
axios请求得到的响应数据怎么绑定到组件el-table上
05-28
这个过程应该是：在Vue组件的methods中调用Axios的get或post方法，然后在then回调中将返回的数据赋值给组件的数据属性，比如tableData。然后，在模板中，el-table的:data="tableData"就会自动渲染这些数据。不过，我...
Vue + Vant 项目集成讯飞语音听写功能及常见问题解决方案
G1870719370的博客
06-12 999
本文详细介绍了在Vue + Vant项目中集成讯飞开放平台语音听写功能的完整过程，并针对开发过程中可能遇到的常见问题，如浏览器对Date请求头的限制、Buffer对象在浏览器环境中不存在以及初始化错误等，提供了深入的分析和多种解决方案。理解讯飞语音听写API的基本集成流程。掌握在前端项目中处理音频录制和发送的方法。解决浏览器安全策略带来的跨域和请求头限制问题，特别是通过后端代理或WebSocket进行鉴权。处理浏览器环境中Node.js特有对象（如Buffer）的兼容性问题。排查和解决。
findItemData(id){ this.$axios({ method: "post", url: `${this.global.MSI_STORAGE}/splitAllot/findSplitAllotPrint`, data: { data:{ splitItemId: id } }, }).then((res) => { if (res.data.status === "Y") { this.$notify({ title: '1', message: res.data.data, type: 'success', duration: 3000, // 显示时长（毫秒），0 表示不自动关闭 position: 'top-right' // 位置：top-right/top-left/bottom-right/bottom-left }); this.orderData.dataList = res.data.data || []; } else { this.$message.error(res.data.message); } }); }这是vue中的一个方法，方法调用接口返回的res.data.data为{ "amountKg": 3, "amountPiece": 0.075, "category": "散烟", "gradeNo": "B2F", "inStoreName": "金艺", "outStoreName": "五里岗", "placeOrigin": "湖南张家界桑植", "planYear": "2023", "remark": "熟读扫嗲殴打", "splitNo": "DBFJ2507140015", "variety": "湘烟7号" }赋值给this.orderData.dataList，为什么赋值失败，this.orderData.dataList打印为[]?
最新发布
07-18
}`（truthy 值，应直接赋值），但在实际运行时，服务器返回的 `res.data.data` 可能在某些情况下为假值（例如，接口返回 `data: null` 或未定义），导致 `|| []` 生效。检查网络响应或添加 `console.log(res.data....
ajax同步提交数据，并把请求返回值赋值给全局变量
qq_34851184的博客
11-17 3117
ajax默认请求是异步的即async: true,只需改为async: false即可 function ajaxFormat(url,params){ var dictBasic = ""; $.ajax({             cache: true,             type: "POST",             url:url,            
Vue中使用Mock模拟get和post请求
efew212efe的博客
04-29 4052
Mock模拟post请求 很多时候，前端的开发需要配合后端接口数据，但是后端开发未完成的时候，前端不能苦等，可以先用mock来进行数据模拟和调试。 使用方法如下： 1、安装mockjs npm install mockjs 2、在vue项目中mock创建文件夹 创建mock文件夹之后.还需要创建json文件.作为pots请求数据源 3、在index.js中写如下代码 一般情况是在src文件夹下创建api文件夹,用来管理整个项目的接口数据,然后我们需要接着在api文件夹下创建index.js,作为入口
vue axios 回调后data中数据取不到
weixin_45000761的博客
06-28 3907
造成axios取不到值得原因主要是this回调问题。当你执行完函数function时，this指向放生变化。导致this指向函数体本身。这时this.data里的数据取不到。简单直接的解决就是把function写成箭头函数形式，箭头函数不是构造函数，不会指定this，而是抓取上下文this作为自己的this。从而解决本问题。下面上代码： 错误示例： import axios from ‘axios...
node做中间件用axios转发接口时，数据返回问题
12-14 1734
1.node做中间件发送请求时，服务器响应的数据外包括一层，所有的数据都是在返回数据的data对象中存着，我还要res.data,这样才能取到想到的返回值，而不是直接返回我要的数据，还有其它header,status等对象信息，这是为什么？ 2.axios在node层请求接口时，如果参数错误，服务器返回的接口数据最外层的staus=401，axios直接就报错了，走了catch，这是为什么？如下...
Vue使用axios无法修改响应数据问题的解决办法
u010218170的博客
03-21 2846
Vue使用element-ui，点击button显示正在加载并请求接口，完成后关闭正在加载。但出现axios请求成功不关闭正在加载的情况。。 Vue使用axios请求接口，代码片段： this.$axios.post(urlRegister, qs.stringify(rParams) ).then(function (response) { this...
获取axios返回结果并传值调用函数
qq_27735533的博客
06-16 6406
1、引入axios 2、使用axios发送请求 3、获取返回值val 使用箭头+this调用其他函数
vue开发过程中，修改了数据，但是页面不渲染，没变化！怎么办？
weixin_45561965的博客
04-12 2471
定义一个update:false,每次修改数据的时候在后面加一句this.update=!就这么写 this.items=JSON.parse(JSON.stringify(this.items));方法1（推荐）：用JSON.parse(JSON.stringify(objectOrArray))方法6（不推荐）：用location.replace(“”);通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染。this.$set(this.d,“a”,“新的值”);
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值