异步加载数据

作者:江月迟迟

发表于:2024-12-10

字数统计:341 字

预计阅读2分钟

在遇到异步加载数据的时候会出现一些bug，往往是组件以空数据初始化，然后主线程才请求回后台数据，虽然数据绑定到组件数据中，但是组件不会重新加载导致组件显示为空或者其他属性问题。

element dialog中使用echart图表初始化为空

问题描述

点击事件触发dialog，dialog中使用echart图表，echart图表显示为空

问题原因

dialog数据是当即绑定和渲染的，直接执行了echart的初始化，然而echart图表数据来自于后端，需要等待

解决方案

首先，解决报错问题

// computed
return this.list && this.list.length > 0 ? this.list[this.showIndex] : {}

其次，解决渲染问题，在点击后，异步请求完数据再初始化echart图表。

大致有两种思路，v-if判断数据是否为空使得echart初始化在获得数据后，或者请求完直接初始化。

swiper图片数据异步加载但loop属性不重新加载

问题描述

swiper不会循环播放（loop为false）

问题原因

swiper初始化完成后才获得了后端数据

解决方案

使用v-if，使得拥有数据后才初始化swiper