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

最新推荐文章于 2024-03-23 15:52:45 发布
原创 最新推荐文章于 2024-03-23 15:52:45 发布 · 5.3k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript #vue #前端框架

在React应用中，尽管使用reactive()观察到接口已获取数据，但数据并未实时更新到页面上。问题在于只有通过push()方法将数据添加到集合中时，页面才会显示数据。现已解决，页面能正确渲染数据。

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

 

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

 

 

现在页面已经渲染数据 

Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
🏆 前端领域优质创作者
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ulv-for="(item,index)ingetData()":key="index"> <li>{{item.name}}</li> </ul> </template> getData(){ apidata... } 由于模板（templat
vue3封装echarts图表数据无法渲染到页面
AsUs.的博客
09-02 1772
在你提供的代码中，ECharts 图表的数据被初始化为 this.cntData，但 this.cntData 在组件创建时是一个空数组。要使图表能够根据后端传来的数据进行渲染，你需要确保在数据加载完成后再初始化图表。在你的代码中，loadGet 方法通过异步请求从后端获取数据，并在获取数据后调用initEcharts 方法。问题是后端的数据已经成功返回到前端了，但是Echarts图表一直不能被渲染，卡了一个多小时，最后问gpt才解决（gptyyds！然而，挂载阶段还没开始，DOM 元素也还没有被创建。
Vue3 reactive响应式赋值页面不渲染问题
热门推荐
qq_40934617的博客
02-17 1万+
问题描述： //声明变量 let data = reactive([]) http().then(res=>{ data = res.data console.log(data) }) //data数据更新，页面没有渲染 解决方法： 1、依旧是reactive，可以在外面包一层 //声明 let state = reactive({ data:[] }) //赋值 state.data= res.data 2、改为ref赋值 //声明 let data = ref([]) //
浅谈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
Vue3中页面已渲染，但没有数据/已经获得数据，页面没有显示问题
最新发布
weixin_46105377的博客
03-23 3264
解决方法非常简单：使用v-if(推荐)或v-show
vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 3035
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
在Vue.js开发过程中，经常会遇到页面初始化时由于数据还未加载完成而导致访问数据字段时出现`undefined`的错误。这个问题通常是由于Vue组件的生命周期导致的，因为Vue组件在数据请求完成前就已经进行了初次渲染。...
浅谈vue获得后台数据无法显示到table上面的坑
10-14
问题出在原始代码中，`this.uList`在回调函数内部没有正确引用Vue实例的`uList`属性，导致数据更新未反映到视图。通过将`this`保存在变量`arr`中，确保在异步操作中仍然可以访问到Vue实例的属性。 另一个可能导致...
vue使用ajax获取后台数据进行显示的示例
10-18
在本示例中，我们将探讨如何使用 Vue.js 和 AJAX（通常指的是 XMLHttpRequest 或者 Fetch API）来从后台获取数据并将其显示在页面上。AJAX 是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。 ...
AJax 把拿到的后台数据在页面中渲染的实例
10-18
在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种常用的技术，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本实例将详细介绍如何使用AJAX从后台获取数据并在页面中进行渲染。 ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
Vue进阶（幺捌陆）：异步请求导致页面数据渲染错误问题解决
IT全栈 华强工作室
04-22 4781
场景描述 在Vue项目优化过程中，页面部分应用JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据值。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。处理逻辑大致如下： <template> <div v-for="(items, index) in results" :key="items.itemsID"> <span v-for="(item, index) in items.appendItems" :key="it
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-弹窗表单数据渲染不成功
m0_57537410的博客
12-11 937
vue3弹窗渲染数据失败
vue：关于异步请求导致页面不渲染问题的解决
defined_的博客
05-08 3085
最近在vue中使用axios请求时获取后端数据时，发现因为后端返回数据需要时间，导致页面渲染时没有拿到数据，数据无法渲染出来。因为只有将其声明为reactive或是ref类型，它才是一个响应式的变量，才能在自身值改变时重新渲染页面。可以看出试了很多方法，最后发现是变量定义的错误。
Vue控制台有数据但是渲染不到页面
m0_52496388的博客
06-21 789
result对应的是这里的result。如果控制台显示的是data，那就写data（个人感觉）。这里的result是后来加的。
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 1万+
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
vue3 js中存在数据，但却无法渲染的情况
qq_43382759的博客
10-01 3458
vue bug
【vue3】setup中数组数据变化页面不渲染
sumimg的博客
10-13 1025
此时用到的版本是vue: 3.2.13，目前已修复此问题。——2023.3.24 修改。点击按钮后，数组发生了变化，但是页面不渲染。点击按钮后，数组发生变化，页面重新渲染。
Vue动态数据驱动页面展示与组件渲染
Vue 是目前前端开发领域中应用最为广泛的渐进式 JavaScript 框架之一，其核心理念是“数据驱动视图”，即通过数据的变化自动触发页面的重新渲染。标题“Vue根据数据动态展示页面”正是体现了 Vue 框架在实际项目开发...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值