vue和jquery配合使用出现的问题

实践 问题处理 Vue 前端
前端
发布日期:   2018-03-28
文章字数:   313
阅读时长:   1 分
阅读次数:  

按照官方文档this.$nextTick可以在dom渲染完成之后执行操作，于是出现了以下问题

如图
图片描述

图片描述

  • 上图为列表部分，下图为vue部分
  • 采用watch监听数据变化,然后用this.$nextTick等待dom渲染完成再执行方法

预期得到这样的结果
图片描述

实际上得到的结果
图片描述

如果说在控制台执行方法，可以将上图变为预期结果
图片描述

  • 初看之下，似乎this.$nextTick并没有生效，但是实际上的确是dom渲染完成之后才执行的方法;
  • 猜测原因是图片源是位于服务器端，而不在vue端，dom渲染完成，但是图片资源并没有加载完成，于是出现了这样的情况;
  • 解决方案是设置定时器,如图

图片描述
采用这种方式延时等待图片资源加载完成，但是如果请求端网络情况较差，仍然会出现加载不全的情况，因此此方案也有一些不稳定性。

以上

文章作者: Qliang
文章链接: https://blog.bestqliang.com/2018/03/28/vue-he-jquery-pei-he-shi-yong-chu-xian-de-wen-ti/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Qliang !
实践 问题处理 Vue 前端
评论
 上一篇
docker数据库备份 docker数据库备份
第一次备份脚本直接执行可以备份成功，当使用定时任务进行备份的时候，备份的文件为空，也就是说没有mysqldump出内容 #!/bin/bash docker_name=mysql_container data_dir=/home/ubunt
2018-05-18 Docker
实践 问题处理 Docker
下一篇 
mycat实践 mycat实践
本次实践基于 ubuntu 系统;mycat:1.6.5;采用docker拉起 3 个mysql容器,端口分别位于 33061，33062，33063。 安装javasudo apt-get install openjdk-8-jdk-
2018-03-01 数据库
技术 实践 Mycat 数据库
  目录