How to treat each element as single over array in Vuejs

Question

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 },

hoverProdotti[], i.e declared as an array, update it using this.hoverProdotti[index] and use it like :src = "hoverProdotti[index] === 1 .... etc" — Bravo
– Bravo, Commented Jul 4, 2022 at 10:46

Rohìt Jíndal · Accepted Answer · 2022-07-05 16:52:23Z

You can simply achieve this by adding a hoverProdotti property in each object of prodotti array with default value as false. The reason behind this is that it should be dynamic to implement the swap logic only for the specific hover image not for all images.

Live Demo :

new Vue({ el: '#app', data: { prodotti: [{ title: 'Title 1', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 2', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 3', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }, { title: 'Title 4', images: [ 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Swapped Image', 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Non Swapped Image' ], hoverProdotti: false }], }, methods: { swapImage(index) { this.prodotti[index].hoverProdotti = true }, swapImageLeave(index) { this.prodotti[index].hoverProdotti = false } } })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(prodotto,index) in prodotti" :key="prodotto.title"> <img @mouseover="swapImage(index)" @mouseleave="swapImageLeave(index)" :key="index" :src="prodotto.hoverProdotti ? prodotto.images[0] : prodotto.images[1]" :alt="prodotto.title"> </div> </div>

That's another good solution thank you! I have to map through the array first and give it a arrayItem.hoverProdotti = false but it's not what we really want to do now
In that case you can go with the solution which @Shreeraj provided.

Shreeraj · Accepted Answer · 2022-07-04 20:38:53Z

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.

Collectives™ on Stack Overflow

How to treat each element as single over array in Vuejs

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related