使用 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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

福州大学《嵌入式系统综合设计》 实验八:FFMPEG视频编码

一、实验目的 掌握使用算能平台进行视频编码的流程,包括开发主机环境与云平台的配置,视频编码程序的编写与理解,代码的编译、运行以及学习使用码流分析工具分析视频压缩码流等。 二、实验内容 搭建实验开发环境,编译并运行编码…

软著项目推荐 深度学习动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

图数据库HugeGraph:HugeGraph-Hubble基于Web的可视化图管理初体验

原创/朱季谦 一、HugeGraph-Hubble简介 关于HugeGraph,官方资料是这样介绍的,它是一款易用、高效、通用的开源图数据库系统(Graph Database), 实现了 Apache TinkerPop3 框架及完全兼容 Gremlin 查询语言&#xff0c…

Pod控制器简介,ReplicaSet、Deployment、HPA三种处理无状态pod应用的控制器介绍

目录 一.Pod控制器简介 二.ReplicaSet(简写rs) 1.简介 (1)主要功能 (2)rs较完整参数解释 2.创建和删除 (1)创建 (2)删除 3.扩容和缩容 &#xff08…

【Python】torch.exp()和 torch.sigmoid()函数详解和示例

本文对torch.exp()和 torch.sigmoid()函数进行原理和示例讲解,以帮助大家理解和使用。 目录 torch.exp函数原理运行示例 torch.sigmoid()函数原理运行示例torch.sigmoid相关知识 结合运行 torc…

Leetcode 380. O(1) 时间插入、删除和获取随机元素

文章目录 题目代码(11.28 首刷看解析) 题目 Leetcode 380. O(1) 时间插入、删除和获取随机元素 代码(11.28 首刷看解析) 1.length:表示的是数组的长度 数组 2.length():表示的是字符串的长度 字符串 3.size():表示的是集合中有多…

Re55:读论文 Entities as Experts: Sparse Memory Access with Entity Supervision

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称:Entities as Experts: Sparse Memory Access with Entity Supervision 模型名称:Entities as Experts (EaE) ArXiv网址:https://arxiv.org/abs/2004.07202 本文…

看懂YOLOv7混淆矩阵的含义,正确计算召回率、精确率、误检率、漏检率

文章目录 1、准确率、精确率、召回率、误报率、漏报率概念及公式1.1 准确率 Accuracy1.2 精确率 Precision1.3 召回率 Recall1.4 F1-Score1.5 误检率 false rate1.6 漏检率 miss rate 2、YOLOv7混淆矩阵分析 1、准确率、精确率、召回率、误报率、漏报率概念及公式 重点参考博文…

基于Eclipse+Mysql+Tomcat开发的挖掘机配件营销系统

基于EclipseMysqlTomcat开发的挖掘机配件营销系统 项目介绍💁🏻 大家都有目共睹,现在的科学技术发展很迅速。而如今,计算机应用已经完全融入到人们的生产和生活当中,特别是企业,现在的企业几乎都是离不开计…

LLM大语言模型

大语言模型的定义 大语言模型(英文:Large Language Model,缩写LLM),也称大型语言模型,是一种人工智能模型,旨在理解和生成人类语言。它们在大量的文本数据上进行训练,可以执行广泛的…

数据结构与算法之美学习笔记:27 | 递归树:如何借助树来求解递归算法的时间复杂度?

目录 前言递归树与时间复杂度分析实战一:分析快速排序的时间复杂度实战二:分析斐波那契数列的时间复杂度实战三:分析全排列的时间复杂度内容小结 前言 本节课程思维导图: 今天,我们来讲这种数据结构的一种特殊应用&am…

vue找依赖包的网址

https://www.npmjs.com/ 浅收藏一下

Flask教程入门

1.学习Flask之前,首先需要对URL进行一定的了解。 URL的一些知识: 1.URL只能包含ASCII码里面一些可显示的字符,如A-Z,a-z,0-9,&,#,%,?,/等字符…

Android控件全解手册 - 任意View缩放平移工具-实现思路和讲解

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分…

day64 django中间件的复习使用

django中间件 django中间件是django的门户 1.请求来的时候需要先经过中间件才能达到真正的django后端 2.响应走的时候也需要经过中间件 ​ djangp自带七个中间件MIDDLEWARE [django.middleware.security.SecurityMiddleware,django.contrib.sessions.middleware.SessionMiddle…

java三大集合类--List

List Set Map 一、List 几个小问题: 1、接口可以被继承吗?(可以) 2、接口可以被多个类实现吗?(可以) 3、以下两种写法有什么区别? //List list1new List();是错误的因为List()…

【axios封装】万字长文,TypeScript实战,封装一个axios - 基础封装篇

目录 前言版本环境变量配置引入的类型1、AxiosIntance: axios实例类型2、InternalAxiosRequestConfig: 高版本下AxiosRequestConfig的拓展类型3、AxiosRequestConfig: 请求体配置参数类型4、AxiosError: 错误对象类型5、AxiosResponse: 完整原始响应体类型 目标效果开始封装骨架…

C#文件流FileStream类

目录 一、文件流类 1.FileStream类的常用属性 2.FileStream类的常用方法 3.使用FileStream类操作文件 二、文本文件的写入与读取 1.StreamWriter类 2.StreamReader类 3.示例及源码 三、二进制文件的写入与读取 1.BinaryWriter类 2.BinaryReader类 3.示例源码 数据流…

【数据结构/C++】栈和队列_链栈

链头 栈顶。 #include<iostream> using namespace std; // 链栈 typedef int ElemType; typedef struct Linknode {ElemType data;struct Linknode *next; } *LiStack; // 初始化 void InitLiStack(LiStack &S) {S (LiStack)malloc(sizeof(struct Linknode));S->…

Shell条件变量练习

1.算数运算命令有哪几种&#xff1f; (1) "(( ))"用于整数运算的常用运算符&#xff0c;效率很高 [rootshell scripts]# echo $((24*5**2/8)) #(( ))2452814 14 (2) "$[ ] "用于整数运算 [rootshell scripts]# echo $[24*5**2/8] #[ ]也可以运…