Vue.js中如何仅对数组内当前悬停元素单独切换图片src

现有代码无法实现单元素单独切图的核心原因：hoverProdotti 是全局0/1状态标记，只要任意产品触发悬停，该值就变为1，所有产品的img都会命中判断逻辑同步切换src，无法区分当前悬停的具体产品项。

将hoverProdotti改为存储当前悬停项的索引值，鼠标离开时重置为无匹配的初始值即可精准控制单个元素的src切换，具体修改如下：

模板代码调整 #

<div class="swiper-slide" v-for="(prodotto,index) in prodotti" :key="prodotto.title">
  <img 
    @mouseover="swapImage(index)" 
    @mouseleave="swapImageLeave" 
    class="swiper-lazy ima-prodotto" 
    :src="hoverProdotti === index ? prodotto.images[0] : prodotto.images[1]" 
    :alt="prodotto.title"
  >
</div>

修正点：

• 移除img标签上多余的:key="index"绑定
• 将src的判断条件从hoverProdotti === 1改为hoverProdotti === index，仅匹配当前悬停索引对应的产品项

JS逻辑调整 #

const app = new Vue({
  el: "#root",
  data: {
    // 初始值设为-1，默认无任何产品处于悬停状态
    hoverProdotti: -1,
    // 原有prodotti产品数组逻辑保持不变
    prodotti: []
  },
  methods: {
    swapImage: function(index) {
      // 存储当前触发悬停的产品索引
      this.hoverProdotti = index
    },
    swapImageLeave: function() {
      // 鼠标离开后重置状态，恢复默认展示图
      this.hoverProdotti = -1
    }
  }
})

如果不想额外维护悬停状态，也可以完全不用写JS逻辑，通过CSS实现切图：每个产品项内同时渲染默认图、悬停图两个img标签，默认隐藏悬停图、显示默认图，通过父元素:hover伪类切换两个图片的显隐状态即可，逻辑更轻量无耦合。

内容的提问来源于stack exchange，提问作者Vincenzo