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

调用showInfo方法：@mouseover="showInfo()"

Answer 4

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

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

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

然后删除箭头。

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

Vue数据属性不具有反应性

4 个答案: