使用 watch+$nextTick 解决Vue引入组件无法使用问题

问题描述:

很多时候我们都需要使用第三方组件库,比如Element-UI,Swiper 等等。

如果我们想要在这些结构中传入自己从服务器请求中获取的数据就会出现无法显示的问题。

比如我们在下面的Swiper例子中,我们需要new Swiper 才能让这个这个轮播图运行起来。

这里的bannerImgs是我们从服务器中请求返回的数据。

我们在new Swiper对象的时候必须要保证DOM元素是完整的。

但是我们的Swiper组件并不能使用,这是为什么?

因为向服务器发送请求是异步任务,而我们在mounted中的new Swiper 是同步任务。

也就是说,在new Swiper的时候,数据还没从服务器返回回来new Swiper操作就已经执行完了!

解决方法:

我们可以使用watch 加上 $nextTick 的方案来解决这个问题。

如果对于watch和$nextTick有疑问的可以看这两篇文章:

Vue中的监视属性_vue监视属性_永久旅途的博客-CSDN博客

[Vue nextTick-CSDN博客](https://blog.csdn.net/XunLin233/article/details/134093371 "Vue nextTick-CSDN博客")

因为我们要保证DOM节点完整的时候才能new Swiper对象。

什么情况下DOM结构才完整?

  1. 从服务器请求的数据已经回来了。

  2. DOM已经放到页面上了。

所以我们就可以使用watch 来监视是否改变从而达到判断数据是否已经请求回来了,使用$nextTick 等到DOM已经放到页面上后再执行new Swiper。

相关推荐
福兮说11 分钟前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa18 分钟前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端
deli0071 小时前
DLA 枝晶生长实测:5000 个粒子集体停摆之后,分形维数收敛到 1.70
前端
IT_陈寒1 小时前
Redis卡顿的锅,这次真不是大key的错
前端·人工智能·后端
可乐鸡翅yeah_1 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
程序猿追2 小时前
HarmonyOS 6 上做个极简浏览器:Web 组件 + 前进后退 + 加载进度
前端·华为·harmonyos
沐沐师2 小时前
Mybatis 框架教程
前端
三天不学习2 小时前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
明月_清风2 小时前
面对陌生的 GitHub 项目无从下手?这 4 个网站帮你快速读懂源码
前端·后端·github
htzyl2062 小时前
前端阶梯——第九章、颜色、文本与背景
前端·css