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.
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.
Then we can get the height with the clientHeight property of the element that’s been assigned the ref.
For instance, we can write:
<template>
<div id="app">
<div ref="infoBox">hello world</div>
</div>
</template>
<script>
export default {
name: "App",
mounted() {
console.log(this.$refs.infoBox.clientHeight);
},
};
</script>
We assigned the ref with the ref prop set to a name.
Then we can use the this.$refs property to get the element with thos.$refs.infoBox which returns the div element.
And then we can use clientHeight to get the div’s height.
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.
