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'
  }
}