Sometimes, we want to get an element’s height with Vue.js.

In this article, we’ll look at how to get an element’s height with Vue.js.

How to get an element’s height with Vue.js?

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.

For instance, we write

<template>
  <section>
    <div ref="infoBox">
      <img />
      <ul>
        some list
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  //...
  mounted() {
    this.matchHeight();
  },
  matchHeight() {
    const height = this.$refs.infoBox.clientHeight;
  },
};
</script>

to assign the infoBox ref to the div with the ref prop.

Then we get the div’s height with

this.$refs.infoBox.clientHeight;

Conclusion

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.