CODEWITHSUNDEEP
javascriptvue.js
Rejoanul Alam
Rejoanul Alam

Reputation: 5398

vuejs mouseover add class to this element

How can I add class on mouse over on list item & remove class on mouse leave

<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">1</li>
<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">2</li>
<li class="test" @mouseenter="thumbStyle" @mouseleave="thumbStyle2">3</li>

In data & methods

data(){
  isActive:false
}

thumbStyle:function(){
   this.isActive = true;
},


thumbStyle2:function(){
   this.isActive = false;
},

I have tried this but it is only adding class to first element (li) when I over on any list(li). So what is the technique to add only this(hovered) li. Like in jquery there are $(this)

Upvotes: 1

Views: 2465

Answers (2)

Rejoanul Alam
Rejoanul Alam

Reputation: 5398

I have solved as belows

thumbStyle:function(e){
            var clickedElement = e.target;
            $(clickedElement).addClass('active');
        },
        thumbStyle2:function(e){
            var clickedElement = e.target;
            $(clickedElement).removeClass('active');
        },

Upvotes: 0

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

The ideal way to handle this is that each of the elements you want to control the state of, are a model, then you can easily manipulate the state of each item.

Here is an example:

new Vue({
  el: '#app',
  data: function() {
    return {
      items: [{
        label: 'Planes',
        active: false
      }, {
        label: 'Trains',
        active: false
      }, {
        label: 'Automobiles',
        active: false
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" 
      @mouseenter="item.active = true"
      @mouseleave="item.active = false"
     >{{ item.label }} is {{ item.active }}</li>
  </ul>
</div>

Upvotes: 1

Related Questions