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-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
这篇文章主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论