Javascript 如何从VueJS中安装的元素获取动态高度

如何使用VueJS计算菜单的动态高度（以像素为单位）

下面使用一种方法，我试图在安装组件后，以

ref=“menu”

的第一个子

li

元素为目标。我的结果是

null

<template>
    ....
    <ul ref="menu">
        <li v-for="(item, i) in items" :key="i">
            {{ item }}
        </li>
    </ul>
    ....
</template>

<script>
    export default {
        method:{
            doSomething(){
                console.log(
                    this.$refs.days.querySelector('li:first-of-type').offsetHeight
                )
            }
        }
        mounted(){
            this.doSomething()
        }
    }
</script?

---

但是，

this.doSomething

在通过路由返回页面时不会运行。我尝试使用以下挂钩：beforeRouteEnter、beforeRouteUpdate、beforeRouteAve；虽然没有从目标页面触发任何命令。

您可以尝试从vuejs使用nexttick函数

mounted() {
 

  this.$nextTick(() => {
      //here the DOM is updated
      this.doSomething();
  });

}

---

有关它的详细信息

$nextTick

在离开路线导航时激发。我需要有东西在被导航的路线上开火。我已经投降了，并对元素高度进行了硬编码。好的一面是，我可以完全删除onload事件监听器，清理代码。

mounted() {
 

  this.$nextTick(() => {
      //here the DOM is updated
      this.doSomething();
  });