Vue.js Vue数据属性不响应

考虑到下面的代码，我不能使活动数据属性成为被动的。在本例中，我只想在图像的鼠标上方显示div

<template>
    <div>
        <img @mouseover="showInfo" class="cursor-pointer w-full" :src="project.images[0].url" width="100%">
        <div v-show="active" class="bg-red h-12">
            Info about the image
        </div>
    </div>    
</template>

<script>
    export default {
        props: ['project'],
        data: function () {
            return {
                active: false
            }
        },
        methods: {
            showInfo: () => {
                this.active = !this.active;
            }
        }
    }
</script>

我尝试过使用v-if替代，并且打印活动，但没有效果。我做错了什么

data() {
    return {
         active: false
     }
},

像上面那样更新您的数据

另外，我将您的函数重命名为toggleInfo，因为它也可以在鼠标外隐藏它

然后取下箭头

toggleInfo() {
     this.active = !this.active;
 }

像上面那样更新您的数据

另外，我将您的函数重命名为toggleInfo，因为它也可以在鼠标外隐藏它

然后取下箭头

toggleInfo() {
     this.active = !this.active;
 }

---

不要使用箭头函数来定义方法，这将不起作用

替换

        showInfo: () => {
            this.active = !this.active;
        }

与：

---

不要使用箭头函数来定义方法，这将不起作用

替换

        showInfo: () => {
            this.active = !this.active;
        }

与：

---

如果您只更改HTML中的值，而不需要单独的方法，那么这会更简单

@mouseover="active = !active"

看起来是这样的,

<div>
   <img @mouseover="active = !active" class="cursor-pointer w-full" :src="project.images[0].url" width="100%">
   <div v-show="active" class="bg-red h-12">
     Info about the image
   </div>
</div> 

---

如果您只更改HTML中的值，而不需要单独的方法，那么这会更简单

@mouseover="active = !active"

看起来是这样的,

<div>
   <img @mouseover="active = !active" class="cursor-pointer w-full" :src="project.images[0].url" width="100%">
   <div v-show="active" class="bg-red h-12">
     Info about the image
   </div>
</div> 

---

数据{}只是数据的简写版本：函数{}是。现在，如果您使用的是样式指南，请将数据的主函数与方法进行比较。是的，这更符合一致性。data{}只是数据的简写版本：function{}是的。现在，如果您使用的是样式指南，请将数据的主要功能与方法进行比较。是的，这更符合一致性