I have an array of products, I want to change the element src only on the one I'm hovering on. If there is a way of doing it in Vuejs I would like to know. My code so far
<div class="swiper-slide" v-for="(prodotto,index) in prodotti" :key="prodotto.title">
<img @mouseover="swapImage(index)" @mouseleave="swapImageLeave" class="swiper-lazy ima-prodotto" :key="index" :src=" hoverProdotti === 1 ? prodotto.images[0] : prodotto.images[1]" v-
bind:alt="prodotto.title">
</div>
const app = new Vue({
el: "#root",
data: {
hoverProdotti:0,
},
methods: {
swapImage: function(index) {
console.log(index)
this.hoverProdotti = 1
},
swapImageLeave: function() {
this.hoverProdotti = 0
},
Assuming that your prodotto.images is an array with couple of images in it and your requirement is to show the image on the 0th index when hovered and show the image on the 1st index when un-hovered.
<div class="swiper-slide" v-for="(prodotto,index) in prodotti" :key="prodotto.title">
<img
@mouseover="hoverProdotti = index"
@mouseleave="hoverProdotti = null"
class="swiper-lazy ima-prodotto"
:key="index"
:src="hoverProdotti === index ? prodotto.images[0] : prodotto.images[1]"
:alt="prodotto.title"
/>
</div>
data: {
hoverProdotti:null,
},
Code explanation:
Assign 'null' value to hoverProdotti variable.
Inside the v-for when you mouse over on a specific element, it's index gets assigned to hoverProdotti, which would fulfill the condition we have placed in :src. And as soon as mouse leaves, hoverProdotti gets null value assigned.
With this logic, it will swap images on your mouseover and mouseleave for the all the elements of the array.
Note: No need of methods or any functions.