解决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 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
微信小程序如何获取地址
Dec 24 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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中extract()函数的妙用分析
2012/07/11 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php 魔术方法详解
2014/11/11 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
javascript call和apply方法
2008/11/24 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
超市采购员岗位职责
2014/02/01 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年班组工作总结
2015/04/20 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
python基础之文件操作
2021/10/24 Python
Python 全局空间和局部空间
2022/04/06 Python