如何在Vuejs中將每個元素視為單個數組

Question

我有一系列產品，我只想在我懸停的那個上更改元素 src。 如果有辦法在 Vuejs 中做到這一點，我想知道。 到目前為止我的代碼

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

Answer 1

您可以通過在prodotti數組的每個對象中添加一個hoverProdotti屬性來簡單地實現這一點，默認值為false 。 這背后的原因是，只為特定hover圖像而不是所有圖像實現交換邏輯應該是動態的。

現場演示：

 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>

Answer 2

假設您的prodotto.images是一個包含幾個圖像的數組，並且您的要求是在懸停時在第 0 個索引上顯示圖像，並在未懸停時在第一個索引上顯示圖像。

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

---

代碼說明：

將“null”值分配給hoverProdotti變量。 在v-for當您將鼠標懸停在特定元素上時，它的索引被分配給hoverProdotti ，這將滿足我們在:src中放置的條件。 一旦鼠標離開， hoverProdotti就會分配null值。

使用此邏輯，它將在您的 mouseover 和 mouseleave 上為數組的所有元素交換圖像。

注意：不需要methods或任何functions 。