vue mounted周期中document.querySelectorAll()获取不到元素的解决
作者：落雪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
总结
希望以后不要折磨粗心啦~
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。