Forum : Evenement mouseenter avec v-for

Bonjour, je suis actuellement en train de réaliser un projet de site e-commerce.
Je souhaite réaliser un effet lorsque l'on passe la souris sur une carte produit pour afficher un bouton "voir la fiche produit" et "ajouter au panier".

Voir le code :

<div @mouseenter="cardHoverIn()" @mouseleave="cardHoverOut()" v-for="item, i in sortedListItems" :key="i" class="card-container">
        <div v-if="displayFilter" class="display">
          <div class="display-btn">
            <router-link class="text-white" to="/"><p class="show-more btn">voir plus</p></router-link>
            <div @click="addItemToCart(item)" class="add-to-card-container text-white">
              <button class="add-to-card-icon btn"><i class="fa-solid fa-cart-plus"></i></button>
            </div>
          </div>
          <div class="display-img">
            <img src="https://www.science-et-vie.com/wp-content/uploads/scienceetvie/2019/02/le-noir-total-existe-il.jpg" alt="">
          </div>
        </div>
        <div class="card">
         <p class="nom-produit">{{item.nom}}</p>
        <img class="img-produit" v-bind:src="item.image" alt="" />
        </div>
    </div>

   [...]

export default {
  data() {
    return {
      listItems,
      sortedListItems: listItems,
      selectedCategory: "empty",
      card: [],
      displayFilter: false,
    }
  },
  methods: {   
    cardHoverIn() {
      this.displayFilter = true;
    },
    cardHoverOut() {
      this.displayFilter = false;
    }
  }
}

Ce que je veux

Ce que je souhaiterai, c'est que seule la carte que je survole affiche les boutton.

Ce que j'obtiens

J'ai réussi a créer cet évenement avec un @mouseEnter="maFonction()", mais le soucis c'est que toute mes cartes affiche les bouttons lorsque je survole une seule de ces carte.

Trail

Et pourquoi ne pas faire ça avec du CSS tout simplement ?

Pandazaur

Bonjour,

Comme l'a dit Trail, je pense que le faire en CSS directement, serait plus simple.
Si tu souhaites le faire en Javascript quoi qu'il arrive, voici le soucis que tu rencontres:

Quand tu mets ta variables displayFilter à true, c'est tout le code de ton v-for qui va être impacté car toutes les itération de la boucle vont regarder displayFilter.

Deux solutions:

Solution rapide mais crade: Au lieu d'utiliser displayFilter, tu fais une variable indexToDisplay, et en gros tu feras un v-if="itemToDisplay === i" et à chaque "mouseenter" tu devras affecter l'index de l'item sur lequel tu viens de passer.
Solution propre et adaptée: Tu crées un nouveau composant <MonItem /> (par exemple) et c'est dans ce composant que tu vas gérer le displayFilter comme ça tu auras un displayFilter par composant de la liste.
Ca donnerait quelque chose comme ça:
```
<MonItem v-for="(item, i) in sortedListItems" :key="i" :item="item" />

```

Voilà, voilà ! Cependant, j'insiste sur le fait que le faire en CSS est à mes yeux la meilleure solution

Evenement mouseenter avec v-for

1 réponse