Javascript Vue js返回错误的元素高度

我需要获得图像/元素的高度，这就是我所做的：

mounted() {
   this.infoHeight = this.$refs.info.clientHeight + 'px';
}

当我保存，然后在热重新加载时，它工作，它得到正确的高度，但当我刷新页面时，它返回一个较小/错误的值。我也在

created（）

上试过，结果是一样的。在其他情况下，它甚至不返回任何内容

更新（临时解决方案？

我也尝试过使用window.addEventListener（'load'，（）=>//todo），但在某些组件上它可以工作，而在其他组件上则不行。

尝试使用它，它将在DOM更新后执行

mounted() {
   this.$nextTick(() => { this.infoHeight = this.$refs.info.clientHeight + 'px' });
}

---

尝试使用计算属性，而不是在lifecycle hook中初始化该属性：

computed: {
  infoHeight (){return this.$refs.info.clientHeight + 'px';}
}

---

同样的问题，在热重新加载时也能工作，但我一刷新，就得到了错误的高度。@KevinBryan:尝试使用计算属性，然后出现同样的问题。非常奇怪的是，像Vue.js这样的流行框架有这样的bug。我使用热重新加载，但当我刷新整个组件时，它就消失了style=“{height:infoHeight}”感谢您的更新。我遇到了完全相同的问题，在mounted中使用setTimeout也为我解决了这个问题，现在我在热加载和刷新时获得了一致的高度。感谢您的解决方案，这是有效的，而nextTick没有

computed: {
  infoHeight (){return this.$refs.info.clientHeight + 'px';}
}