"Implement a feature in Vue.js where hovering over an element will dynamically add a

Question

"Implement a feature in Vue.js where hovering over an element will dynamically add a

What is the best way to apply a class on a list item when hovering over it and remove the class when leaving?

<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 attempted to do this, but only the first list element (li) gets the class applied when hovering over any list item. What technique should be used to target each individual li being hovered over? Similar to using $(this) in jQuery.

javascript vue.js

Answer 1

Answer №1

An effective approach to managing this situation is by treating each element as a model, allowing for easy manipulation of their states.

For instance:

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>

Answer 2

An effective approach to managing this situation is by treating each element as a model, allowing for easy manipulation of their states.

For instance:

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>

Answer 3

Answer №2

Here is my solution:

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

Answer 4

Here is my solution:

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

"Implement a feature in Vue.js where hovering over an element will dynamically add a

Answer №1

Answer №2

Similar questions

The functionality of ui-router appears to be limited when accessed from a nodejs directory, however, it functions properly on

Guideline on extracting private keys from Windows Certificate Manager

Transferring a method through two layers of hierarchy

Can the useNavigation hook be used to navigate to a class component in React?

Ways to update a value in a table by comparing two JSON objects

Configuring Braintree Client with JS v3 - encountering a null payment_method_nonce causing issues with form submission

Antialiasing with Three.js appears to be malfunctioning specifically on iPhone 5 and iPhone 5s devices

Uploading an image using Vue.js

Guarding Vue.js routes when navigating based on asynchronous authentication state requests

Environment variables in Node process are uninitialized

Alter the class following modifications to the list

Converting DateTime objects into JSON format for use in AJAX calls

Utilizing Node npm to access the three.js module for front-end development

Tips for dividing the rows within an array using the match() function?

Using httpRequest to handle binary data in JavaScript

The 'myCtrl' parameter is invalid as it is not recognized as a function and is currently set to undefined

The preflight response does not allow the access-control-request-methods request header field due to restrictions set in the access-control-allow-

Error Message: Stencil Launch Issue - InvalidTypeException("The parameter 'url' should be in string format, not " + the data type of url)

How can you substitute sections of a sentence with an array of strings?

Utilizing HTML5 to automatically refresh the page upon a change in geolocation