Vue js返回错误的元素高度

Question

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

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

当我在热重载时保存它时，它会工作，它会获得正确的高度，但是当我刷新页面时，它会返回较小/错误的值。我也试了一下created()，也是一样的。在其他情况下，它甚至不返回任何内容。

更新（临时解决方案？）

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

我也尝试过使用window.addEventListener('load', () => //todo)，但在某些组件上它有效，而在其他组件上则无效。

Answer 1

尝试使用$nextTickwhich 将在 DOM 更新后执行。

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