El evento de desplazamiento no funciona en este componente de vue, intenté llamar a una función al pasar el mouse y funcionó, pero no puedo cambiar la variable de desplazamiento directamente
<template> <div @mouseover="hover = true" @mouseleave="hover = false" class="dot" style="width: 50px; height: 50px; background-color: darkgreen"> </div> </template> <script> export default { name: "InteractiveDotComponent", data(){ return { hover: false//doesn't change on hover } } } </script> <style scoped> </style>usar esto tampoco funciona
@mouseover="this.hover = true"La variable flotante en realidad está cambiando. Supongo que está inspeccionando la variable con Vue.js devtools. A menos que algo en la plantilla esté leyendo la variable, las herramientas de desarrollo de Vue.js no la actualizarán automáticamente. Para verlo cambiar, intente leer la variable en su plantilla.
<template> <div @mouseover="hover = true" @mouseleave="hover = false" class="dot" style="width: 50px; height: 50px; background-color: darkgreen"> {{hover}}</div> </template>