Vue data property not reactive

Question

Considering the code below, I can not make the active data property reactive. In this case I would like to show a div only on mouseover on an image.

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

I have tried using v-if instead and printing active but to no effect. What am I doing wrong?

Fab · Accepted Answer · 2019-02-06 08:16:04Z

11

Don't use arrow functions to define methods, this will not work.

Just replace

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

With:

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

answered Feb 6, 2019 at 8:16

Fab

4,6572 gold badges25 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satyam Pathak · Accepted Answer · 2019-02-06 08:20:19Z

1

This can be simpler if you just change the value in HTML and you don't require a separate method for that.

@mouseover="active = !active"

It will look like this,

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

answered Feb 6, 2019 at 8:20

Satyam Pathak

6,9603 gold badges28 silver badges52 bronze badges

Comments

Michael Mano · Accepted Answer · 2019-02-06 21:44:44Z

1

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

Update your data like the one above.

Also I'd rename your function to toggleInfo as it can also hide it on mouse out.

And remove the arrow.

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

edited Feb 6, 2019 at 21:44

answered Feb 6, 2019 at 8:14

Michael Mano

3,4582 gold badges16 silver badges36 bronze badges

3 Comments

Sebastian Over a year ago

data() {} is just the shorthand version of data: function() {}

Michael Mano Over a year ago

Yes. Now if you were using a style guide compare the main function of data to the methods.

Michael Mano Over a year ago

Yes, that was more for consistency

Collectives™ on Stack Overflow

Vue data property not reactive

3 Answers 3

Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Related