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中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue项目持久化存储数据的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue常用API、高级API的相关总结，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
这篇文章主要介绍了解决vue做详情页跳转的时候使用created方法 数据不会更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了解决echart在vue中id重复问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
Vue常见错误Error in mounted hook解决办法
这篇文章主要给大家介绍了关于Vue常见错误Error in mounted hook的解决办法,出现这样的问题,会发现跟声明周期钩子有关系,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue中v-show和v-if的异同 ，通过代码详解v-show用法，本文给大家介绍的非常详细具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
我们在使用element-ui的时候经常会遇到需要修改组件默认样式,下面这篇文章主要给大家介绍了关于element-ui中样式覆盖问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
最新评论