@mouseover canot change a variable value-CodePudding

Hover event is not working in this vue component, I tried to call a function on hover and it worked but I can't change hover variable directly

<template>
    <div @mouseover="hover = true"
         @mouseleave="hover = false"
         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>

using this neither works

 @mouseover="this.hover = true"

CodePudding user response：

The hover variable actually is changing. I assume you're inspecting the variable with Vue.js devtools. Unless something in the template is reading the variable, Vue.js devtools won't automatically update it. To see it change, try reading the variable in your template.

<template>
    <div @mouseover="hover = true"
         @mouseleave="hover = false"
         style="width: 50px; height: 50px; background-color: darkgreen">
    {{hover}}</div>
</template>