VueJS: Get left, top position of element?

Question

While converting legacy jquery code, I stuck at getting position of element.

My goal is display floating div above a tag.

Here is my

Answer 1

This is not a Vue question per se, but more a javascript question. The common way to do this now is by using the element.getBoundingClientRect() method. In your case this would be:

Create a ref on your element and pass that ref in a method like this:

In your methods object create the method to handle the click:

methods: {
    getPos(busstop) {
         const left = this.$refs.busstop.getBoundingClientRect().left
         const top = this.$refs.busstop.getBoundingClientRect().top
         ...
    }
}

Supported by all current browsers: https://caniuse.com/#feat=getboundingclientrect

More info here:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect