CODEWITHSUNDEEP
javascriptarraysvue.js
Vincenzo
Vincenzo

Reputation: 433

How to treat each element as single over array in Vuejs

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

Upvotes: 1

Views: 240

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

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>

Upvotes: 2

Shreeraj
Shreeraj

Reputation: 767

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.

Upvotes: 1

Related Questions