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

最新推荐文章于 2024-05-27 16:10:57 发布
最新推荐文章于 2024-05-27 16:10:57 发布
阅读量4.7k 收藏 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
    评论
专栏目录
浅谈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.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 1201
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
Vue发起请求后端数据
最新发布
qq_57319760的博客
05-27 1321
在Vue中使用请求工具发起请求
vue：关于异步请求导致页面不渲染问题的解决
defined_的博客
05-08 2610
最近在vue中使用axios请求时获取后端数据时，发现因为后端返回数据需要时间，导致页面渲染时没有拿到数据，数据无法渲染出来。因为只有将其声明为reactive或是ref类型，它才是一个响应式的变量，才能在自身值改变时重新渲染页面。可以看出试了很多方法，最后发现是变量定义的错误。
vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化
reason125132的博客
05-04 9096
vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。
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_46627407的博客
07-06 9911
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
浅谈vue获得后台数据无法显示到table上面的坑
10-14
问题出在原始代码中，`this.uList`在回调函数内部没有正确引用Vue实例的`uList`属性，导致数据更新未反映到视图。通过将`this`保存在变量`arr`中，确保在异步操作中仍然可以访问到Vue实例的属性。 另一个可能导致...
AJax 把拿到的后台数据在页面中渲染的实例
10-18
在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种常用的技术，用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本实例将详细介绍如何使用AJAX从后台获取数据并在页面中进行渲染。 ...
vue使用ajax获取后台数据进行显示的示例
10-18
在本示例中，我们将探讨如何使用 Vue.js 和 AJAX（通常指的是 XMLHttpRequest 或者 Fetch API）来从后台获取数据并将其显示在页面上。AJAX 是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。 ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
基于vue3+elementPlus的后台管理系统模板实现
03-03
2. **Teleport**：Vue3的新特性，允许将组件渲染到DOM树的任意位置，特别适用于解决弹窗、模态等需要插入到body元素下的场景，避免了嵌套组件导致的复杂性。 3. **Suspense**：Vue3新增的 Suspense 组件，用于处理...
Vue3_开发中遇到的问题_不会立刻渲染
我是我
11-25 1453
在刚刚使用Vue3开发的时候，碰到如下问题： 数据获取后，已经获取成功了数据，但是页面不会立刻渲染 代码如下： <template> <span>{{staffInfo.XXXX}}</span> </template> <script> import {onMounted} from 'vue' import {reactive, toRefs} from "@vue/reactivity"; export default {
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([]) //
vue3 js中存在数据，但却无法渲染的情况
qq_43382759的博客
10-01 3003
vue bug
elementUI表格el-table数据排序/更新后，不重新渲染（页面数据不更新）
zzjbj910的博客
05-16 1422
查看element文档，数据需要设置key，但是用el-table提供的row-key不太好用。这里预测是，前后数据内容一致，dom不更新，可能是为了提升页面性能。给table增加一个随机key，每次重新赋值tableData的时候，也传递随机key值，这样页面就可以重新渲染el-table了。前端页面选择重新排序，重新向后端请求数据，排序规则改变但数据内容不不变，表格数据不重新渲染。
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
王佳斌
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data 直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> </ul> </template> getData() { api data ... } 由于模板（templat
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 8670
打印出来值，赋值未渲染
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值