vue mounted周期中document.querySelectorAll()获取不到元素的解决
更新时间：2024年03月06日 10:11:36 作者：落雪bin飞
这篇文章主要介绍了vue mounted周期中document.querySelectorAll()获取不到元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
mounted周期document.querySelectorAll()获取不到元素
在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。
- v-if的初始化结果为false。
- v-for遍历的数组初始化阶段无值。
（即mounted阶段后，根据获得的后台数据来动态操作dom）这两种情况都会导致mounted阶段获取元素的语句获取不到dom。
解决方案
1、把获取元素的语句放在异步获取到数据，赋值给data中的key之后进行。同时需要给获取元素的语句加上setTimeout。因为setTimeout是宏任务，会在vue的render函数执行之后再执行。
2、把获取元素的语句放到updated周期中执行。这种情况下每次视图更新之后都会执行一次获取元素的语句，如果不需要每次视图更新之后都执行，可以在mounted周期中，使用this.$once("hook: updated", function() {...}) ，让获取元素的语句只在updated阶段执行一次。
TypeError: this.$el.querySelectorAll is not a function报错
在渲染权限tree时出现
TypeError: this.$el.querySelectorAll is not a function
最后反复检查代码发现elementui中有个default-checked-keys（默认勾选的节点的 key 的数组）
我们在绑定的时候一定要动态绑定也就是：default-checked-keys
总结
希望以后不要折磨粗心啦~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现页面刷新动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在Vue.js应用中,动态表单是一个常见的需求,尤其是当表单字段的数量和类型需要根据用户输入或系统状态动态变化时,本文将详细介绍如何在Vue中实现动态表单的创建,并通过多个示例展示具体的实现方法,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue单页面在微信下只能分享落地页的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要为大家详细介绍了Vue实现根据hash高亮选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了Vue3管理后台项目使用高德地图选点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
淘宝大家都使用过，淘宝滑动验证码的目的是为了验证到底是人还是机器，今天小编给大家分享的是模仿淘宝滑动验证码的样式，感兴趣的朋友跟随小编一起看看吧2019-12-12
这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下2023-11-11
在vue中路由使用this.$router.go(-1)返回两次问题
这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最新评论