VueJS: Get left, top position of element?
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
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'
}
}