CODEWITHSUNDEEP
vue.js
Nayereh Rasuli
Nayereh Rasuli

Reputation: 216

The proper way to use hover event handler in Vue.js

I am self-learning Vue.js and need help. I am practicing event handlers now. I want the red box to become 100px wider when I hover over it. It works fine when I replace hover with click, But does not work with hover. Appreciate it if you can point out what is wrong whit my code.

<!DOCTYPE HTML>
<html>

<head>
    <title>v-on Event Handlers</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .redbox {
            width: 100px;
            height: 100px;
            background: red;
        }

        .redboxwide {
            width: 200px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" v-on:hover="redbox();">Hover over me</div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',

            data: {
                redboxhover: false
            },
            methods: {
                redbox: function () {
                    this.redboxhover = !this.redboxhover;
                }
            }

        });
    </script>
</body>

</html>

Upvotes: 1

Views: 4754

Answers (3)

Nayereh Rasuli
Nayereh Rasuli

Reputation: 216

With the help of @tauzN and @Alex Kosh, I changed my code to the following. I added both @mouseover and @mouseleave.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  .redbox {
    width: 100px;
    height: 100px;
    background: red;
  }
  
  .redboxwide {
    width: 200px;
    height: 100px;
    background: red;
  }
</style>
<div id="app">
  <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" @mouseover="redbox();" @mouseleave="!redbox();">Hover over me</div>
</div>
<script>
  var app = new Vue({
    el: '#app',

    data: {
      redboxhover: false
    },
    methods: {
      redbox: function() {
        this.redboxhover = !this.redboxhover;
      }
    }
  });
</script>

Upvotes: 0

tauzN
tauzN

Reputation: 6951

Use @mouseover like this:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
  .redbox {
    width: 100px;
    height: 100px;
    background: red;
  }
  
  .redboxwide {
    width: 200px;
    height: 100px;
    background: red;
  }
</style>
<div id="app">
  <div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" @mouseover="redbox();">Hover over me</div>
</div>
<script>
  var app = new Vue({
    el: '#app',

    data: {
      redboxhover: false
    },
    methods: {
      redbox: function() {
        this.redboxhover = !this.redboxhover;
      }
    }
  });
</script>

Upvotes: 1

Alex Kosh
Alex Kosh

Reputation: 2554

You need to use v-on:mouseover instead of v-on:hover. Also you might need v-on:mouseleave for cleanup.

Here you could find more info about existing Events and mouseover

Upvotes: 3

Related Questions