So, I am currently attaching event listeners to an array of elements with the intention that when a specific element is hovered over, it will set a property to the id of that element. However, instead of grabbing the id of the hovered element, it seems to be selecting the id of the last element to which the event listener was added.
My main query here is how can I retrieve the id of the element being hovered over?
It's important to mention that I am utilizing Vue and attempted to use the @mouseover event, but it seems that because I'm using it on a package called vue-pdf, the event is not registering properly.
<pdf
v-for="i in numPages"
:key="i"
:page="i"
:src="src"
v-if="!loading"
@num-pages="pageCount = $event"
:ref="`${i}`"
:id="`${i}`"
@mouseover="setPage(i)"
/>
After rendering the document, I call this method:
methods:{
addListener() {
if(this.numPages > 0) {
for(var i = 0; i < this.numPages; i++) {
var span = this.$refs[i+1][0].$el
//this is where I encounter issues
span.addEventListener('mouseover', () => {
this.currentPage = span.getAttribute('id')
})
}
} else {
console.log('didnt work')
}
},
}
mounted() {
this.addListener()
}
In addition, I have devised a workaround involving getBoundingClientRect, but I believe there should be a simpler way to determine the currently viewed element.