解决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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
JavaScript实现星级评价效果
May 17 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php中explode函数用法分析
2014/11/15 PHP
开启PHP的伪静态模式
2015/12/31 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
eval与window.eval的差别分析
2011/03/17 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Django日志模块logging的配置详解
2017/02/14 Python
django中forms组件的使用与注意
2019/07/08 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
武汉瑞得软件笔试题
2015/10/27 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
质检的岗位职责
2013/11/17 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
中层干部考核评语
2015/01/04 职场文书
催款律师函范文
2015/05/27 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android