使用 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博客

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/228441.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让@RefreshScope注解来帮助我们实现动态刷新

文章目录 前言举例作用参考文章总结 前言 在实际开发当中我们常常会看到有些类上会加一个注解:RefreshScope,有没有对应的小伙伴去思考过这个东西,这个注解有什么作用?为什么要加?下面我们就来看看这个 RefreshScope …

前端入门(四)Ajax、Promise异步、Axios通信、vue-router路由

文章目录 AjaxAjax特点 Promise 异步编程(缺)Promise基本使用状态 - PromiseState结果 - PromiseResult Axios基本使用 Vue路由 - vue-router单页面Web应用(single page web application,SPA)vue-router基本使用路由使…

Jmeter--如何监控服务器资源

在我们做项目的性能测试时,需要查看相关服务器的资源使用情况;本文以apache-Jmeter-5.5版本为例,使用PerfMon进行服务器资源监控的方案由两部分来实现:ServerAgent部署在被测服务器,负责资源耗用数据的采集&#xff0c…

《深入理解计算机系统》学习笔记 - 第三课 - 位,字节和整型

Lecture 03 Bits,Bytes, and Integer count 位,字节,整型 文章目录 Lecture 03 Bits,Bytes, and Integer count 位,字节,整型运算:加,减,乘,除加法乘法取值范围乘法结果 使用无符号注…

苍穹外卖项目笔记(6)— Redis操作营业状态设置

1 在 Java 中操作 Redis 1.1 Redis 的 Java 客户端 Jedis(官方推荐,且命令语句同 redis 命令)Lettuce(底层基于 Netty 多线程框架实现,性能高效)Spring Data Redis(对 Jedis 和 Lettuce 进行了…

读像火箭科学家一样思考笔记12_实践与测试(下)

1. 舆论的火箭科学 1.1. 如果苹果违反了“即飞即测”原则,那苹果的iPhone就不会问世了 1.1.1. iPhone在其上市前的民意调查中相当失败 1.1.1.1. iPhone不可能获得太大市场份额,不可能。 1.1.1.1.1. 微软前CEO史蒂夫鲍尔默(Steve Ballmer&…

SpringBoot RestTemplate 的使用

一、简介 RestTemplate 在JDK HttpURLConnection、Apache HttpComponents、OkHttp等基础上&#xff0c;封装了更高级别的API&#xff0c;默认依赖JDK HttpURLConnection&#xff0c;连接方式默认长连接。 二、使用 2.1、引入依赖 <dependency><groupId>org.spri…

Python财经股票数据保存表格文件 <雪球网>

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境使用: Python 3.10 解释器 Pycharm 编辑器 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ python源码、视频教程、插件安装教程、资料我都准备好了&…

如果每天工资按代码行数来算,来看看你每天工资是多少

说在前面 &#x1f63c;&#x1f63c;如果每天的工资取决于我们所编写的代码行数&#xff0c;那么我们的生活会发生怎样的改变&#xff1f;来看看你的同事们今天都提交了多少代码吧&#xff0c;看看谁是卷王&#xff0c;谁在摸鱼&#xff08;&#x1f436;&#x1f436;狗头保命…

SLURM资源调度管理系统REST API服务配置,基于slurm22.05.9,centos9stream默认版本

前面给大家将了一下slurm集群的简单配置&#xff0c;这里给大家再提升一下&#xff0c;配置slurm服务的restful的api&#xff0c;这样大家可以将slurm服务通过api整合到桌面或者网页端&#xff0c;通过桌面或者网页界面进行管理。 1、SLURM集群配置 这里请大家参考&#xff1…

STM32F407-14.3.5-01捕获_比较通道

捕获/比较通道 每一个捕获/比较通道都是围绕着一个捕获/比较寄存器(包含影子寄存器) 包括: 捕获的输入部分(数字滤波、多路复用和预分频器)&#xff0c; 输出部分(比较器和输出控制)。 中文参考手册中框图分成了三大模块, 把框图合并成了一个整体,以便更好的理解捕获输…

仿东郊到家预约按摩小程序开发;

在这个快节奏的现代社会&#xff0c;人们对便捷、高效的服务需求日益增大。正因如此&#xff0c;到家预约系统上门按摩小程序应运而生&#xff0c;它结合了互联网技术和传统按摩服务&#xff0c;不仅满足了人们对便捷按摩服务的需求&#xff0c;还为商家提供了全新的商业价值。…