A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

Question

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected.

I attempted binding the class to a variable, but this resulted in all items being impacted simultaneously.

<template>
  <ul>
    <li class="item" v-for="item in items" @mouseenter="showInfoBar()" @mouseleave="hideInfoBar()">
        <span class="infobar" :class="{ show : infoBar }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: false
    }
  },
  methods: {
    showInfoBar() {
      this.infoBar = true
    },
    hideInfoBar() {
      this.infoBar = false
    }
  }
}
</script>

javascript html css vue.js

Answer 1

Answer №1

Here is an alternative approach you could take:

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" :key="index" @mouseenter="infoBar = index" @mouseleave="infoBar = null">
        <span class="infobar" :class="{ show : infoBar == index }"> </span>
    </li>
  </ul>
</template>

Then, for your data property:

data()  {
    return {
      infoBar: null
    }
},

Answer 2

Here is an alternative approach you could take:

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" :key="index" @mouseenter="infoBar = index" @mouseleave="infoBar = null">
        <span class="infobar" :class="{ show : infoBar == index }"> </span>
    </li>
  </ul>
</template>

Then, for your data property:

data()  {
    return {
      infoBar: null
    }
},

Answer 3

Answer №2

The issue here lies in the fact that the variable infoBar is being used to represent the state of all info bars collectively, instead of each info bar individually.

To resolve this, you can transform infoBar into an array where each element corresponds to the state of the info bar at a specific index.

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" @mouseenter="showInfoBar(index)" @mouseleave="hideInfoBar(index)">
        <span class="infobar" :class="{ show : infoBar[index] }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: []
    }
  },
  mounted: function() {
    for(var i = 0; i < this.items.length; i++) {
      this.infoBar.push(false);
    }
  },
  methods: {
    showInfoBar(index) {
      this.infoBar[index] = true;
    },
    hideInfoBar(index) {
      this.infoBar[index] = false;
    }
  }
}
</script>

Answer 4

The issue here lies in the fact that the variable infoBar is being used to represent the state of all info bars collectively, instead of each info bar individually.

To resolve this, you can transform infoBar into an array where each element corresponds to the state of the info bar at a specific index.

<template>
  <ul>
    <li class="item" v-for="(item, index) in items" @mouseenter="showInfoBar(index)" @mouseleave="hideInfoBar(index)">
        <span class="infobar" :class="{ show : infoBar[index] }"> </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'ItemsList',
  props: ['items'],
  data()  {
    return {
      infoBar: []
    }
  },
  mounted: function() {
    for(var i = 0; i < this.items.length; i++) {
      this.infoBar.push(false);
    }
  },
  methods: {
    showInfoBar(index) {
      this.infoBar[index] = true;
    },
    hideInfoBar(index) {
      this.infoBar[index] = false;
    }
  }
}
</script>

Answer 5

Answer №3

In my opinion, it would be more efficient to handle this not as an array but as individual components. It is best practice to let each component manage its own state rather than managing the state of a group of "components" in an array. Taking inspiration from React, you can define ItemsList and Item as separate components with each Item having its own state. Let me know if you agree with this approach. Best of luck.

Revised Thoughts After Reviewing the Code

I also suggest that after refactoring your code, instead of handling state changes in two separate methods, you should create a single toggleMethod() where you toggle the current state value logically.

This approach is preferable:

function toggleState() {
    this.someState = !this.someState;
}

Over this method:

function showState() {
    this.someState = true;
}
function hideState() {
    this.someState = false;
}

Best of luck!

Answer 6

In my opinion, it would be more efficient to handle this not as an array but as individual components. It is best practice to let each component manage its own state rather than managing the state of a group of "components" in an array. Taking inspiration from React, you can define ItemsList and Item as separate components with each Item having its own state. Let me know if you agree with this approach. Best of luck.

Revised Thoughts After Reviewing the Code

I also suggest that after refactoring your code, instead of handling state changes in two separate methods, you should create a single toggleMethod() where you toggle the current state value logically.

This approach is preferable:

function toggleState() {
    this.someState = !this.someState;
}

Over this method:

function showState() {
    this.someState = true;
}
function hideState() {
    this.someState = false;
}

Best of luck!

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

Answer №1

Answer №2

Answer №3

Revised Thoughts After Reviewing the Code

Similar questions

What steps should I take if the slackbot is properly functioning after being invited to the channel?

Broaden material-ui component functionality with forwardRef and typescript

What is the best way to transfer data between my express middleware functions?

A valid path is required in the form of a string when working with the HTTP module in Node.js

Tips for effectively splitting arrays nested within an array using JavaScript

Identifying Inactivity in Cordova Android Applications

What is the best way to line up a Material icon and header text side by side?

The absence of the 'Access-Control-Allow-Origin' CORS header was noticed in the response from the Wikipedia API

Is it possible to utilize a keyboard listener to activate a tooltip upon being invoked?

Utilizing HTML5 Canvas for Shadow Effects with Gradients

How can I efficiently display three items per click when tapping into jQuery data?

experimenting with adding fresh choices to dropdown menu using ajax and jquery

Exploring the versatility of HTTP actions in Express: Using GET and

Make the table in a bootstrap design appear with a border when you hover over a cell using the table

the status of the XMLHttpRequest Object within the realm of jQuery AJAX

What is causing the initial activation of the <button> within a form?

Ensure that grid rows occupy the least amount of space possible

Experimenting with Selenium to automate processes involving dynamic class attributes

The left and right arrows maintain their visibility even when they are outside of the image

Images Are Failing to Load on the Webpage