Свойство данных 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

Это может быть проще, если вы просто измените значение в 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 2

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

Обновите ваши данные, как показано выше.

Также я бы переименовал вашу функцию в toggleInfo, поскольку она также может скрывать ее при наведении мыши.

И удалитьстрелка.

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

Answer 3

Не используйте функции стрелок для определения методов, this не будет работать.

Просто замените

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

на:

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

Answer 4

Вызовите метод showInfo: @mouseover="showInfo()"