Trying to create an animation triggered by the mouseenter event in Vue, I ran into a roadblock - obtaining the coordinates of the sections.
<script setup>
function fetchCoordinates(e) {
const coords = { x: e.clientX, y: e.clientY } // This seems to be causing issues ¯\_(ツ)_/¯
console.log(coords) // Error
// ...
}
</script>
<template>
<!-- ... -->
<section
@mouseenter="fetchCoordinates()" />
</template>
I experimented with using clientX, pageX, and screenX without success. So, my question is: what method should I use to successfully retrieve the coordinates?