Vue 数据属性不是反应性的

Question

考虑到下面的代码，我不能使active数据属性反应灵敏。在这种情况下，我只想在将鼠标悬停在图像上时显示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 代替并打印active但没有效果。我做错了什么？

Answer 1

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

只需更换

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

跟：

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

Answer 2

如果您只是更改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> 

Answer 3

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

像上面一样更新您的数据。

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

并删除箭头。

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