vue3使用＜script setup＞无法实现axios返回的数据无法响应到列表中

已于 2022-05-25 04:51:04 修改
阅读量998 收藏 3
点赞数
分类专栏： vue3 文章标签： javascript 前端 vue.js
于 2022-05-25 04:47:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_14723/article/details/124958594
版权

表格

在这里插入图片描述

请求后台

在这里插入图片描述

数据已赋值，列表不渲染

在这里插入图片描述

后台成功返回数据

在这里插入图片描述

请求封装

在这里插入图片描述

axios封装

在这里插入图片描述

请问问题出在什么地方

PS：看很多帖子写法是如下，这种方式可以实现，难道用script setup就不能实现么？
在这里插入图片描述
在这里插入图片描述

VUE3 页面没有默认加载从接口返回的数据 解决方案
u014212540的博客
04-19 595
VUE3 页面没有默认加载从接口返回的数据 解决方案
vue3 script setup下axios请求 页面为空白
zjy9951的博客
07-18 2653
解决方法 在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个suspense标签， 原文地址 代码 //父组件app.vue <template> <img alt="Vue logo" src="./assets/logo.png" /> <suspense> <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> </sus
Vue3 `＜script setup＞` 中使用export报错的解决方案
最新发布
BillKu的博客
04-24 527
的设计目标是让组件的逻辑更简洁，所有顶层绑定都会自动暴露给模板，不需要显式导出。需要跨组件共享的常量应该通过模块系统（import/export）管理。是编译时语法糖，会被编译为组件的 setup() 函数。组件本身不是 ES 模块，无法直接导出绑定。语法中，不能直接使用 ES 模块的。如果是要给后代组件提供数据，应该使用。可以使用组合式 API + 普通。// 这里可以使用 setup 语法。// 直接声明即可，自动暴露给模板。// 普通 script 块导出。
2021-9-1 vue3中有关vuex中数据不是响应式的问题
qq_44014425的博客
09-01 3792
记录一下今天踩到的坑 今天写项目的时候，在一个组件的 div 中用了 v-show='show' 绑定了vuex中的一个数据，下面代码是刚开始写的从 vuex 中拿数据 setup(){ let store = useStore(); let show = store.state.show; } 然后发现，这个数据不是响应式的，即使数据在vuex中改变了，并且在console.log中输出也是改变过后的，但是在页面中显示还是原来的值。 后来通过万能的百度发现，原来获取 vuex 中的
Vue3.0的setup里面使用axios,以及跨域问题的解决.(setup语法糖),setup语法糖使用axios教程.setup使用axios
qq_37189642的博客
09-02 9961
一.介绍 我们先看一张图 这是vue3.2.1版本以上的vue语法糖,只能这么写了. 二.在setup里面使用Axios 1.安装 在cmd中先安装axios npm install --save axios vue-axios 2.main.js中注册 在main.js中引入后用app.config.globalProperties 注册全局方法 //main.js //引入 import VueAxios from 'vue-axios' import axi...
vue3.0的setup函数以及解决其内的数据不是响应式数据的问题
m0_59345890的博客
09-16 4310
1.这个函数内部的变量/函数是局部的；2.如果想要使用其的数据或函数，需要return出来，这个就好比我们学的闭包。这个函数的返回值 可以被当前组件的任意地方使用；3、但是函数内不可以使用外部的数据或函数，即setup内不能使用this。4、setup返回的对象中的数据和data中的数据同名了 setup优先级更高5.setup在组件加载期间 只会运行一次setup还有一个语法糖，直接在script标签行内写setup。
vue3+ionic+capacitor<script setup>axios新消息进行系统本地通知
11-04
Vue3结合Ionic和 Capacitor框架构建的项目中，如果你想在用户接收到新的API数据更新时发送本地通知，可以使用`@capacitor/notification`插件以及`axios`库。以下是一个简单的步骤说明： 1. 安装必要的依赖： - ...
Vue3+ionic <script setup>实现新消息自动触发警报弹窗并全局应用
09-30
在Vue3中结合Ionic框架，`<script setup>` 配合使用可以创建响应式的组件，并利用Vue的副作用函数（如`onMounted()`、`watch()`等）来实现新消息的自动检测和警报弹窗功能。以下是一个简单的步骤概述： 1. **设置...
前端页面打开自动请求并加载出数据库数据表内容 已知axios封装好的接口为list 来自文件夹api 的AppData.js 在vue3在使用<script setup> 组合式写法
06-06
在 Vue 3 中，你可以使用组合式 API 的 `setup` 函数来请求并加载数据库数据表内容。下面是一个示例代码： ```html <template> <div> <table> <thead> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> ...
vue3+ionic+capacitor<script setup>软件切换为为后台运行时,axios新消息进行系统本地通知
10-30
在 Vue 3 结合 Ionic 和 Capacitor 的项目中，当你使用 `<script setup>` 来编写代码，并且希望在应用程序从前台转到后台运行（比如进入后台模式或手机锁定），当有新的 Axios 请求响应时，你需要实现一种机制来触发...
业务：基层单位填写月度资金，填写的时候出现弹窗，一列展示本月的计划资金，另外两列需要填写本月的实际资金和下一月的计划资金。设计数据库，并使用vue3的<script setup>
03-11
在<script setup>中，需要引入ref或reactive来管理响应式数据，比如表格的数据数组、弹窗的显示状态、当前编辑的数据等。可能还需要使用axios或fetch来获取和提交数据。 还需要考虑如何获取月份数据，可能需要从...
Vue发axios请求，数据成功拿到，但是不能渲染到页面的问题
Anana13的博客
05-23 1万+
Vue发axios请求，数据成功拿到，但是不能渲染到页面的问题。 昨天还还好的项目，今天开服务器代理报错。一开始以为代理有问题，就各种搜，无效。 最后竟然发现是接口出了问题！！！ 找到新的接口后，拿到数据，但是还是无法渲染到页面，又是各种搜。。。 最后看工具，发现JSON数据获取的是对象，我按着数组处理的，肯定不对啊。。。太蠢了。。以下是我修改的过程，希望可以帮到你 查看JSON数据格式 获取到的JSON是对象中包含数组 返回查看发请求的代码 这是改之前的错误代码 mounted() { thi
Vue3 setup语法糖下的axios全局设置教程
henda233的博客
06-04 827
在Vue3的组件式API开发下，this关键词不再适用，网上很多配置axios教程都是以Vue2为基础的，在Vue3下不再适用。近期尝试用组件式API风格写项目，在配置全局axios就遇到了这个问题。
Vue使用axios无法修改响应数据问题的解决办法
u010218170的博客
03-21 2806
Vue使用element-ui，点击button显示正在加载并请求接口，完成后关闭正在加载。但出现axios请求成功不关闭正在加载的情况。。 Vue使用axios请求接口，代码片段： this.$axios.post(urlRegister, qs.stringify(rParams) ).then(function (response) { this...
Vue3异步请求获取数据在渲染时不显示的问题
热门推荐
m0_46527751的博客
05-24 1万+
Vue3异步请求获取数据在渲染时不显示的问题 获取对象数组 let goodmessagelist:IArticle[]= reactive([]) onMounted(async()=>{ let res = await posts() /* 这里不能直接goodmessagelist = res.rows */ goodmessagelist.push(...res.rows) }), 参考：使用vue3中的异步 获
【以axios为例，关于Vue3全局挂载报错解决方案】
qq_43746955的博客
09-20 2709
为了方便后期开发的便捷性，vue可以方便的将axios挂载到全局进行使用，大大的提高了前后端开发速度和减少了后期的维护成本。可是随着vue的迭代发展，目前主流的vue2和出了没多久的vue3在使用上和语法上或多或少的都出现了分歧，导致有的开发者从vue2过渡到vue3时有许多很不习惯的地方，也有很多奇奇怪怪的bug出现，这里奉上我使用vue3过程中出现的bug。
关于js语法报错，以及idea不能识别vue语法的解决方法，以及项目开始需要检查的三点建议
努力的小周2022的博客
10-12 2085
js报错，idea识别vue语法，项目开发建议
vue3 setup 语法糖axios的引入和基本使用
qq_69073409的博客
05-27 711
安装axios、配置axios、导入request 使用api
解决IDEA JUnit测试文件中setup方法里的属性、类名无法识别的问题
Lyn_zhu的博客
04-20 828
这几天学习了用JUnit写测试文件，但是在@beforeeach里写的setup方法里的每一个属性和类名都在后续的测试里无法识别，具体又找不到错误，后来上课问了老师，解决了，这里浅浅记录一下～ 问题： 可以看到在setUp里先定义和初始化 但是后面的测试方法里仍然无法识别 解决方法： 没有必要在每一个测试方法前都定义一个，只需要定义一次，每次测试前初始化即可，因此把定义的语句拿到外面来，就好啦！ 改成这样： String code ; String descript.
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值