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.markInfoBusStop.markerInfoStyle.left = left + 'px';

Above isn't reactive.

1. use Vue.set

See Doc

2. use computed

for example (you still need to customize to fit your needs.)

data

{
 left: 200,
 top: 200,
}

method

onMouseEnterBusStop: function(ev) {
  this.left = ev.clientX;
  this.top = ev.clientY;
}

computed

markerInfoStyle: function(){
  return {
    left: this.left + 'px',
    top: this.top + 'px'
  }
}

Answer 2

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 <a> element and pass that ref in a method like this:

<a ref = "busstop" 
     href="#none"  
    v-for="busstop in busstops" 
    @click = getPos(busstop)>

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