Sometimes, we want to get left, top position of element? in Vue.js
In this article, we’ll look at how to get left, top position of element? in Vue.js
How to get left, top position of element in Vue.js?
To get left, top position of element? in Vue.js, we can call the getBoundClientRect method.
For instance, we write
<template>
<a ref="busstop" href="#" @click="getPos"> ... </a>
</template>
<script>
//...
export default {
//...
methods: {
getPos(event) {
const { left, top } = this.$refs.busstop.getBoundingClientRect();
//...
},
},
//...
};
</script>
to call getPos when we click on the link.
We assigned the busStop ref to the link.
So, we can call this.$refs.busStop.getBoundingClientRect to get an object with the position of the element.
We get the left position with left, top position with top, right position with right, and bottom position with bottom.
Conclusion
To get left, top position of element? in Vue.js, we can call the getBoundClientRect method.
