Vue异步请求导致页面数据渲染错误问题解决方法示例
更新时间：2023年09月25日 09:16:10 作者：SHQ5785
这篇文章主要为大家介绍了Vue中异步请求导致页面数据渲染错误问题解决方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
一、场景描述
在Vue项目优化过程中，页面部分通过JS调用promise返回的异步数据，导致页面部分始终无法加载后台返回的数据。通过触发其他DOM操作（例如折叠栏位的操作），后台数据可以正常渲染展示。
处理逻辑大致如下：
<template>
<div v-for="(items, index) in results" :key="items.itemsID">
<span v-for="(item, index) in items.appendItems" :key="item.itemID">
<el-button type="text" @click="handlerClick(item)">
{{item.itemName}}
</el-button>
</span>
</div>
</template>
<script>
results.foreach((result, index, results) => {
results[index].appendItems = []
aysnMethods(inputParams).then(res => {
results[index].appendItems = res.returnResults
})
})
</script>二、问题分析
经过页面数据输出及debugger断点调试，发现在页面渲染结束前，异步数据并未处理完毕，导致页面数据渲染问题。
当vue实例生成后，再次给对象赋值时，并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
受 ES5 限制，Vue.js 不能检测到对象属性的添加或删除，即Vue未做到脏数据检查。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
三、解决措施
通过以上问题分析，可通过v-if控制页面渲染、销毁逻辑，在异步方法请求前销毁相应数据，异步方法请求成功后新建相应数据段。
代码如下：
<template>
<div v-if="showForm">
<div v-for="(items, index) in results" :key="items.itemsID">
<span v-for="(item, index) in items.appendItems" :key="item.itemID">
<el-button type="text" @click="handlerClick(item)">
{{item.itemName}}
</el-button>
</span>
</div>
</div>
</template>
<script>
data(): {
return {
showForm: false
}
}
results.foreach((result, index, results) => {
results[index].appendItems = []
vm.showForm = false
aysnMethods(inputParams).then(res => {
results[index].appendItems = res.returnResults
vm.showForm = false
})
})
</script>后经过实践发现，另一种解决方式可应用this.$set()实现。
拓展阅读
《Vue进阶Vue.set()和this.$set()介绍》
以上就是Vue异步请求导致页面数据渲染错误问题解决方法示例的详细内容，更多关于Vue异步请求页面渲染错误的资料请关注脚本之家其它相关文章！
相关文章
Vue router/Element重复点击导航路由报错问题及解决
这篇文章主要介绍了Vue router/Element重复点击导航路由报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇关于vue-router命名视图的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了Vue Steam同款登录验证数字输入框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要为大家详细介绍了Vue结合SignalR实现前后端实时消息同步，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本篇文章主要介绍了深入理解vue的状态管理模式vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
关于配置babel-plugin-import报错的坑及解决
这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在前端vue的开发中,有一点是必须要做的,那就是将所有的API接口封装起来,因为从开发到最终上线的过程中,API是需要经常更换的,下面这篇文章主要给大家介绍了关于Vue项目API接口封装的相关资料,需要的朋友可以参考下2022-09-09
因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue解决刷新页面时会出现变量闪烁的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
最新评论