How to treat each element as single over array in Vuejs-CodePudding

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  v-for="(prodotto,index) in prodotti" :key="prodotto.title">
   <img @mouseover="swapImage(index)" @mouseleave="swapImageLeave"  :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
      },

CodePudding user response：

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  v-for="(prodotto,index) in prodotti" :key="prodotto.title">
  <img 
    @mouseover="hoverProdotti = index" 
    @mouseleave="hoverProdotti = null" 
     
    :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.

CodePudding user response：

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>