Vue异步请求导致页面数据渲染错误问题解决方法示例
作者: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异步请求页面渲染错误的资料请关注脚本之家其它相关文章!