解决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 相关文章推荐
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 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下打开URL地址的几种方法小结
2010/05/16 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP反射API示例分享
2016/10/08 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
推荐信格式要求
2014/05/09 职场文书
团员个人总结
2015/02/26 职场文书
浅析Django接口版本控制
2021/06/26 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript