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异步请求页面渲染错误的资料请关注脚本之家其它相关文章！
相关文章
readonly是Vue3中提供的一个新特性，用于将一个响应式对象变成只读对象，这篇文章主要介绍了Vue3 中的 readonly 特性详解,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue eslint简要配置,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
作为一个曾经的Java coder,当第一次看到js里面的装饰器Decorator,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的,这篇文章主要给大家介绍了关于Vue项目之ES6装饰器在项目实战中应用的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了使用 JSON.stringify() 列化一个Error,需要的朋友可以参考下2023-10-10
在工作中遇到N次input无法输入的问题,所以下面这篇文章主要给大家介绍了关于vue el-input输入框输入不了的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
使用vue.js进行项目的开发已经有了一定的时间，在任务的过程中以及和不同的开发使用者交流中，逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项2016-04-04
这篇文章主要介绍了详解如何从零开始搭建Express+Vue开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论