Tengo una variedad de productos, quiero cambiar el elemento src solo en el que estoy pasando. Si hay alguna forma de hacerlo en Vuejs me gustaria saber. Mi código hasta ahora
<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 },Suponiendo que su prodotto.images es una matriz con un par de imágenes y su requisito es mostrar la imagen en el índice 0 cuando se desplaza y mostrar la imagen en el índice 1 cuando no se desplaza.
<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, },Explicación del código :
Asigne el valor 'nulo' a la variable hoverProdotti . Dentro de v-for cuando pasa el mouse sobre un elemento específico, su índice se asigna a hoverProdotti , lo que cumpliría la condición que hemos colocado en :src . Y tan pronto como el mouse se va, hoverProdotti obtiene un valor null asignado.
Con esta lógica, intercambiará imágenes en su mouseover y mouseleave para todos los elementos de la matriz.
Nota: No se necesitan methods ni functions .