在Vue中获取HTMLCollection列表的children时结果为undefined
在Vue中获取HTMLCollection列表的children时结果为undefined在Vue的钩子函数mounted()中尝试通过document.querySelectorAll()获取HTMLCollection时发现返回的结果为undefined,且length为值也为0:在Vue的官网查询得知,mounted钩子函数不能保证所有子组件都被挂在完成:在实例挂载完成后被调用,这时候传递给
·
在Vue中获取HTMLCollection列表的children时结果为undefined
在Vue的钩子函数mounted()
中尝试通过document.querySelectorAll()
获取HTMLCollection
时发现返回的结果为undefined,且length的值也为0:
在Vue的官网查询得知,mounted钩子函数不能保证所有子组件都被挂载完成:
在实例挂载完成后被调用,这时候传递给 app.mount 的元素已经被新创建的 vm.$el 替换了。如果根实例被挂载到了一个文档内的元素上,当 mounted 被调用时, vm.$el 也会在文档内。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:
但我在加入了$nextTick
实例方法之后,仍然是同样的现象,令人困惑。
于是我便想到了通过MutationObserver
来监视DOM的变动,在DOM全部渲染完毕后再获取。代码如下:
async mounted() {
// 监视DOM,全部DOM加载完毕后再调用回调函数
this.observer = new MutationObserver(this.getDir);
this.observer.observe(document.querySelector(`#content`), {
childList: true,
subtree: true,
attributes: true
});
}
结果成功:
关于MutationObserver
可以移步MDN或者其它博文。
当然肯定有其它更好的方法,此方法仅供参考。
更多推荐
已为社区贡献1条内容
所有评论(0)