[Vuejs]-Trying to change image of a component in vue js but it's touching the entire row

by

0👍

✅

You have multiple produits but only a single hover state variable, which is shared by all of them. If you want each to have their own hover state, you will need separate variables. You can either have a hover array of the same length as produits, or just add a hover attribute to each.

For example:

<fiche-produit v-for="produit in produits"
               @mouseover.native="$set(produit, 'hover', true)" 
               @mouseleave.native="$set(produit, 'hover', false)"
               v-bind:image="[produit.hover ? produit.image2 : produit.image]"
               :key="produit.id">
</fiche-produit>

Leave a comment