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异步请求页面渲染错误的资料请关注脚本之家其它相关文章!

相关文章

  • Vue项目中实现AES加密解密的全过程

    Vue项目中实现AES加密解密的全过程

    AES算法是一种对称加密算法,用于加密和解密数据,下面这篇文章主要给大家介绍了关于Vue项目中实现AES加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • 创建和运行Vue.js项目方法demo

    创建和运行Vue.js项目方法demo

    这篇文章主要为大家介绍了创建和运行Vue.js项目方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Vue实现商品分类菜单数量提示功能

    Vue实现商品分类菜单数量提示功能

    这篇文章主要介绍了Vue实战—商品分类菜单数量提示功能,本文通过项目实战给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 在Vue项目中引入腾讯验证码服务的教程

    在Vue项目中引入腾讯验证码服务的教程

    这篇文章主要介绍了在Vue项目中引入腾讯验证码服务的教程,需要的朋友可以参考下
    2018-04-04
  • Vue实现自动检测以及版本的更新

    Vue实现自动检测以及版本的更新

    当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢?下面给大家介绍如何站点更新如何在生产环境提示用户更新,进行页面刷新操作,核心原理其实很简单
    2023-03-03
  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    Vue中通过属性绑定为元素绑定style行内样式的实例代码

    这篇文章主要介绍了Vue中通过属性绑定为元素绑定style行内样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Vue如何使用CSS自定义变量

    Vue如何使用CSS自定义变量

    这篇文章主要介绍了Vue如何使用CSS自定义变量,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05
  • 详解Vue单元测试Karma+Mocha学习笔记

    详解Vue单元测试Karma+Mocha学习笔记

    本篇文章主要介绍了详解Vue单元测试Karma+Mocha学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue通过接口直接下载java生成好的Excel表格案例

    vue通过接口直接下载java生成好的Excel表格案例

    这篇文章主要介绍了vue通过接口直接下载java生成好的Excel表格案例
    2020-10-10
  • 详解vue项目的构建,打包,发布全过程

    详解vue项目的构建,打包,发布全过程

    小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程,文章很以后价值,值得你参考。
    2017-11-11

最新评论