Vue3异步请到后台数据时在渲染时页面不显示或者页面没有数据的问题

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量4.4k 收藏 8
点赞数 2
分类专栏： vue3 vite 文章标签： 前端 vue.js javascript vue 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k490031/article/details/129809361
版权
vue3 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
vite
2 篇文章 0 订阅
订阅专栏

页面数据打印是有的证明接口已经获取了数据。

 

 reactive()应该是响应式实时更新数据的但是打印有数据但是页面没有渲染，只有用push()方法添加到数据中

 

 

现在页面已经渲染数据 

呵呵 哒
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue2.x中数据渲染以及vuex缓存的问题
01-21
最近在学习Vue.js，把自己遇到的问题做个记录，所以，今天添加一点小笔记。 在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中… 第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的 v-if 来判断请求的数据是否返回…　 <div class=container id=app> <div v-if='moneyInMsg.uuid'> <
vue在使用ECharts时的异步更新和数据加载详解
08-28
主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
vue3中数据已经获取页面未及时渲染
qq_51589308的博客
03-12 586
vue3中数据已经获取页面未及时渲染
Vue3中页面已渲染，但没有数据/已经获得数据，页面没有显示问题
weixin_46105377的博客
03-23 542
解决方法非常简单：使用v-if(推荐)或v-show
vue3-弹窗表单数据渲染不成功
m0_57537410的博客
12-11 355
vue3弹窗渲染数据失败
vue3 js中存在数据，但却无法渲染的情况
qq_43382759的博客
10-01 2843
vue bug
浅谈vue异步数据影响页面渲染
01-19
今天遇到一个问题，要保证页面渲染前请求的数据已经得到了 由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。 因此我希望能在所有请求都得到后再去做页面的渲染。 1.先把id为app的div用v-if=”appShow”,定义appShow为false进行隐藏，避免渲染 2.写计数器，每1ms进行一次查询，如果session中已经有user，删除过滤器，移除滤布，appShow为true，开始渲染页面，这样可以保证页面的正常渲染。 具体代码如下： created:function (){ let that = this let
vue：关于异步请求导致页面不渲染问题的解决
defined_的博客
05-08 2399
最近在vue中使用axios请求时获取后端数据时，发现因为后端返回数据需要时间，导致页面渲染时没有拿到数据，数据无法渲染出来。因为只有将其声明为reactive或是ref类型，它才是一个响应式的变量，才能在自身值改变时重新渲染页面。可以看出试了很多方法，最后发现是变量定义的错误。
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中的异步 获
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 7874
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
m0_46627407的博客
07-06 9556
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue 路由变化页面数据不刷新的问题
08-27
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue异步axios获取的数据渲染到页面的方法
10-18
今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 解决异步数据更新问题
01-19
记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: , allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( ...
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 730
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
浅谈vue获得后台数据无法显示到table上面的坑
08-09
在使用Vue时，有时候会遇到获得后台数据无法显示到table上面的问题，这是因为可能存在一些常见的坑。 首先，如果后台返回的数据是异步获取的，需要在Vue的生命周期钩子函数中设置一些延时，以确保在数据到达之后再进行操作。例如，在created钩子函数中，可以使用setTimeout来延迟某些操作，等待数据的返回。这样可以避免数据还未到达就渲染表格导致出错。 其次，需要确保在Vue组件中正确地绑定数据。在Vue的el选项中指定的DOM元素内使用v-for指令循环遍历数据，并在表格的相应位置使用{{}}语法将数据绑定。如果没有正确绑定数据，那么即使数据已经获取到了，也无法显示在表格上。 此外，还需要注意表格中的属性绑定是否正确。例如，如果要使用v-bind指令将数据绑定到表格的class、style等属性上，需要确保语法正确且数据的值符合要求。如果属性绑定的值不正确，会导致数据无法显示在表格上或者显示不符合预期的结果。 最后，还需要检查一下浏览器的控制台输出，看是否有相关的错误提示。如果有报错信息，可以根据报错信息来确定问题所在。有时候可能是因为语法错误、变量名错误或者其他错误导致数据无法显示。 综上所述，浅谈了一些可能导致Vue无法将后台数据显示到表格上的常见坑。在使用Vue获得后台数据时，需要仔细检查数据绑定、属性绑定、延时等问题，以保证数据能够正确显示在表格上。同时，也要留意浏览器控制台的报错信息，及时解决可能出现的错误。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值