vue中js操作dom获取属性值刷新后无法获取。

Question

项目开发中需要用js操作dom元素获取元素高度值后进行操作，使用的是原生的方法，在页面第一次加载和刷新页面时会出现无法获取到元素的高度值，在其他页面跳转过来时则可以获得高度值。

<template>
    <img src="../assets/diagram/bottom.png" class="imgBox" ref="bottomImg" />
</template>
<script>
    methods:{
        getHeigth(){
            var bottomHeight = document.getElementsByClassName("imgBox")[0].offsetHeight;
            console.log(bottomHeight);
        }
    },    
    mounted(){
        this.getHeigth();
        window.onresize = () =>{
            this.getHeigth();
        }
    }
<script>

在其他页面跳转过来可以输出高度,页面尺寸变化时也可以正常获取，只有在此页面刷新则无法获取高度。
而且最奇怪的时如果我console.log(document.getElementsByClassName("imgBox"));是有height值且正确的，但是无论我获取这个值的height还是offsetHeight属性都是0。

Answer 1

你在图片@load后在获取试试 或者在@load事件中加$nexttick

Answer 2

在mounted中获取DOM的高度需要有一个延迟获取

mounted(){
   this.$nextTick(() => {
     this.getHeigth();
   });
   window.onresize = () =>{
     this.getHeigth();
   }
}