@mouseover不能改变变量的值

Question

悬停事件在这个值组件中不起作用，我试图调用悬停函数，它起作用了，但我不能直接改变悬停变量

<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>

使用both都不工作

@mouseover="this.hover = true"

Answer 1

悬停变量实际上正在改变。我假设您正在使用Vue.js devtools检查变量。除非模板中的某些东西正在读取该变量，否则Vue.js devtools不会自动更新它。要查看它的变化，请尝试在模板中读取该变量。

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