解决vue页面DOM操作不生效的问题


Posted in Javascript onMarch 17, 2018

现象:

使用Element UI渲染了一个树形结构,设计在鼠标移入每个节点是显示其中的操作按钮,效果如下:

解决vue页面DOM操作不生效的问题

下面是出错部分:

在新增节点后移入新增节点附近(图中是移入一级2),功能按钮的显示位置出现偏移

解决vue页面DOM操作不生效的问题

原因查找:

经过调试发现是在新增节点后,执行DOM操作获取节点时,取到的仍是之前的结构,新增的节点并未获取到。

原因分析:

猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取。

解决方法:

使用Vue.nextTick,看下官方材料:

解决vue页面DOM操作不生效的问题

‘在下次 DOM 更新循环结束之后执行延迟回调',这句话不是特别理解,不过可以看出DOM更新是一个循环的过程,在过程结束之前无法获取到真实的DOM元素(至于这个循环是多久,还在探索中)。而将DOM操作放在nextTick中操作便可以获取到更新后的DOM。

结果:

依据上述原理,将DOM操作的函数在更新数据后在nextTick里调用,实现了理想中的效果。

解决vue页面DOM操作不生效的问题

解决vue页面DOM操作不生效的问题

解决vue页面DOM操作不生效的问题

以上这篇解决vue页面DOM操作不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 #Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 #Javascript
vue获取当前激活路由的方法
Mar 17 #Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 #Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 #Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 #Javascript
vue实现a标签点击高亮方法
Mar 17 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php PDO异常处理详解
2016/11/20 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
NestJs 静态目录配置详解
2019/03/12 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python深入学习之闭包
2014/08/31 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
小班秋游活动方案
2014/02/22 职场文书
超市开学活动方案
2014/03/01 职场文书
讲座主持词
2014/03/20 职场文书
教师产假请假条
2014/04/10 职场文书
诚信考试标语
2014/06/24 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书