关于前端:Vue-mounted阶段获取不到dom的原因及解决方法

20次阅读

共计 579 个字符,预计需要花费 2 分钟才能阅读完成。

形容:
须要在 dom 渲染后,遍历页面中各模块元素,获取各个模块的高度。
在 mounted 阶段用 document.querySelector() 以及 this.$refs 获取元素均获取不到。用两种形式获取元素,打印进去的后果都是 undefined。
有解答说用 this.$nextTick(function(){…}),试了一下在我这个场景中,后果还是 undefined。

起因:
在 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 阶段执行一次。

正文完
 0