vue axios 数据（data）赋值问题

最新推荐文章于 2023-09-10 19:12:57 发布
最新推荐文章于 2023-09-10 19:12:57 发布
阅读量4.8k 收藏 4
点赞数
分类专栏： vue 文章标签： vue

首先，我们在data中声明了一个变量

axios执行后获取数据

显示

但是如果直接赋值的话就会出现这个问题

 原因：在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。对this的指向理解错误。

推荐使用箭头

本文来自 年华007 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/m0_37836194/article/details/80370315?utm_source=copy

mywzj666
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue中axios赋值的问题解决
如需功能开发提供开发说明，请发送邮件至[email protected]
06-23 4312
1.在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。 2.解决方案： 将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性 箭头函数： ...
解决vue接口数据赋值给data没有反应的问题
10-18
今天小编就为大家分享一篇解决vue接口数据赋值给data没有反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中axios请求数据赋值不成功——javascript任务队列
weixin_45286211的博客
03-22 5856
Vue中axios请求数据赋值不成功 问题描述 axios向后端请求数据，在赋值时发现只有在axios中才有数据，而axios访问数据就是空的 在created()中调用请求数据与处理数据的方法 代码： 前端没有数据 输出 可以从控制台输出结果看到，axios外的数据是空的 ...
使用vue3+axios和后端交互时无法改变的data中的数据
haohulala的博客
04-08 332
今天在编写前端页面的时候，打算引入axios进行ajax请求，可以在这个过程中遇到了一个非常大的坑，先来看看有坑的代码。这个问题我真的处理了非常久，后来发现这种写法在then()里面是没有办法拿到this的，解决的办法在下面这篇文章。下面贴一下完整的代码，代码非常简单，就是和后端交互，将查询出来的数据在渲染到页面上。说起来也非常简单，实际上就是在then()里面将函数的形式修改为=>的形式。可以看到，第二次打印this.msg的时候我们拿到了一个空值。我们看一下浏览器端的console的打印情况。
Vue踩坑—axios数据赋值错误Uncaught (in promise) TypeError: Cannot set property ‘mes‘ of undefined
IT__learning的博客
03-02 1万+
最近正在入门vue，有个重要的应用场景：需要将axios请求返回的数据赋值到data中的数据项，data中的数据项会双向绑定到页面中进行渲染。 但是在回调函数中进行赋值时出现错误，原代码如下： methods:{ tijiao(){ this.axios({ method:'post', params: { yhm:this.yhm,
vue 使用axios返回值无法赋值 res.data.results is undefined
qq_43928549的博客
09-19 2306
export default { name: "User", data(){ return{ users:[] } }, components:{ Footer, }, created() { this.$http.get("xxxxxxxxxxxxxxxxxxxxxxxxxxxx").then((res)=>{ console.log(typeof res.data) #是object类型 // res.
axios的最新封装，解决类型AxiosRequestConfig不能赋值给InternalAxiosReqe；CreateAxiosDefaults不能赋值给AxiosRequestConfig
m0_60820509的博客
09-10 7011
关于axios+ts+vue的封装 解决类型"CreateAxiosDefaults'的参数不能赋给类型“AxiosRequestConfig”的参数。 属性headers'的类型不兼容。 类型“(config:AxiosRequestConfig)=>AxiosRequestConfig'的参数不能赋给类型“(value:
Vue3中使用axios
热门推荐
九仞山的专栏
06-13 1万+
详细介绍了axios的安装和基本用法，如何在Vue3中使用axios发送HTTP请求，如何封装axios，使代码具有更好的可维护性，同时，针对跨域问题，也进行了详细的讲解
使用axios从后端获取数据并赋值时遇到的问题
qq_45755298的博客
07-14 252
使用reactive定义了一个数组values，通过axios从后端获取数据并赋值给该数组，再通过onMounted钩子进行页面渲染。但是在我进入页面后却发现页面并没有被渲染。如果用ref定义数组，则可以直接赋值。原因：values经过被重新赋值后。
axiso响应数据赋值给data中的变量
qq_40850266的博客
08-01 513
<script> new Vue({ // 3.绑定视图 el: "#div", // 4.传递数据 data: { msg: "Hello Vue", tableData: [] }, methods: { getTableData() { var that=this axios.get('http://mkgo.xyz:8080/medalsInfo')
vue axios post发送复杂对象问题
12-10
现在vue项目中，一般使用axios发送请求去后台拉取数据。 在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式（post/get等），但如果不做其他配置，post的...
Vue.js使用axios动态获取response里的data数据操作
10-14
主要介绍了Vue.js使用axios动态获取response里的data数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue data对象重新赋值无效(未更改)的解决方式
10-15
主要介绍了vue data对象重新赋值无效(未更改)的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
超爽的抽屉效果.zip
04-19
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
关于学习C语言时写的代码.zip
04-19
C语言诞生于美国的贝尔实验室，由丹尼斯·里奇（Dennis MacAlistair Ritchie）以肯尼斯·蓝·汤普森（Kenneth Lane Thompson）设计的B语言为基础发展而来，在它的主体设计完成后，汤普森和里奇用它完全重写了UNIX，且随着UNIX的发展，c语言也得到了不断的完善。为了利于C语言的全面推广，许多专家学者和硬件厂商联合组成了C语言标准委员会，并在之后的1989年，诞生了第一个完备的C标准，简称“C89”，也就是“ANSI C”，截至2020年，最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C，是因为C语言源自Ken Thompson发明的B语言，而B语言则源自BCPL语言。 1967年，剑桥大学的Martin Richards对CPL语言进行了简化，于是产生了BCPL（Basic Combined Programming Language）语言。
机械臂论文.doc
最新发布
04-19
机械臂论文.doc
S7200 and WINCC flexible.doc
04-19
S7200 and WINCC flexible.doc
27.大学生体质测试管理系统的设计与实现-Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文
04-19
27.大学生体质测试管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码（含数据库脚本）+开发文档+lw（高分毕设项目） 详细设计文档介绍链接：http://t.csdnimg.cn/jtyYh 内容概要： 系统主要分为系统管理员、教师和用户三个部分，系统管理员主要功能包括首页、个人中心、用户管理、教师管理、体质测试管理、测试报告管理、测试成绩管理、留言板、系统管理；基本上实现了整个大学生体质测试管理系统信息管理的过程。 全套项目源码+详尽文档，一站式解决您的学习与项目需求。 适用人群： 计算机、通信、人工智能、自动化等专业的学生、老师及从业者。 使用场景及目标： 无论是毕设、期末大作业还是课程设计，一键下载，轻松部署，助您轻松完成项目。 项目代码经过调试测试，确保直接运行，节省您的时间和精力。 其他说明： 项目整体具有较高的学习借鉴价值，基础能力强的可以在此基础上修改调整，以实现不同的功能。
c语言-c语言编程基础之leetcode题解第24题两两交换链表中的节点.zip
04-19
c语言 c语言_c语言编程基础之leetcode题解第24题两两交换链表中的节点
vueaxios请求数据
05-12
在 Vue 中使用 Axios 发送请求可以按照以下步骤进行： 1. 安装 Axios 通过 npm 安装 Axios： ``` npm install axios ``` 2. 在 Vue 中使用 Axios 在需要发送请求的组件中，可以使用以下代码引入 Axios： ```javascript import axios from 'axios' ``` 然后可以使用 Axios 发送请求： ```javascript axios.get('/api/data') .then(function (response) { console.log(response) }) .catch(function (error) { console.log(error) }) ``` 以上代码发送了一个 GET 请求到 /api/data 接口，并在控制台输出了响应数据或错误信息。 3. 配置 Axios 在 Vue 项目中，可以通过在 main.js 中配置 Axios 的全局默认值来设置一些默认的请求参数和响应处理： ```javascript import axios from 'axios' axios.defaults.baseURL = 'http://api.example.com' axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token') axios.defaults.headers.post['Content-Type'] = 'application/json' Vue.prototype.$http = axios ``` 以上代码设置了 Axios 的默认请求地址、请求头部授权信息和 POST 请求的默认 Content-Type，然后将 Axios 实例挂载到 Vue.prototype 上，以便在组件中使用 this.$http 调用 Axios。 4. 在组件中使用 Axios 在组件中使用 Axios 发送请求也很简单，可以在组件的 methods 中定义一个发送请求的方法： ```javascript import axios from 'axios' export default { name: 'MyComponent', methods: { fetchData () { axios.get('/api/data') .then(response => { this.data = response.data }) .catch(error => { console.log(error) }) } } } ``` 以上代码定义了一个 fetchData 方法，当组件被创建时调用该方法，发送 GET 请求到 /api/data 接口，并将响应数据赋值给组件的 data 属性。如果请求失败，则在控制台输出错误信息。 以上就是在 Vue 中使用 Axios 发送请求的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值