Vue.js循环渲染列表时实现特定元素鼠标悬停切换按钮的问题

问题根因 #

你使用的add是全局统一的响应式状态，所有v-for渲染的商品项都共用这一个状态变量，修改时自然会触发全部列表项的按钮切换。

修复方案 #

不用修改原有数组结构，直接新增一个变量存储当前 hover 项的标识即可，改动量极小：

1. 新增响应式状态
   在data中添加hoverIndex变量，初始值设为-1，代表没有任何项处于 hover 状态：

data() {
  return {
    // 保留你原有的其他变量
    hoverIndex: -1
  }
}

2. 修改模板判断逻辑
   把原来的全局add判断，改成当前项索引和hoverIndex的匹配判断：

<div @mouseenter='mouseEnter(index)' @mouseleave='mouseLeave(index)'>
  <span class='btn itemSpan' :id='item.productID' v-if='hoverIndex !== index' > ${{item.itemValue}}</span>
  <span class='btn itemSapn' v-if='hoverIndex === index' style='color:white;background:#b4a895;' ><i class="fas fa-plus"></i></span>
</div>

3. 调整事件方法逻辑

methods: {
  mouseEnter(index){
    this.hoverIndex = index
  },
  mouseLeave(){
    this.hoverIndex = -1
  },
  // 保留你原有的其他方法
}

优化提示 #

如果你的列表会有排序、删除等操作，建议用item.productID代替index作为hover状态的标识，避免数组顺序变动导致的状态匹配错误，逻辑完全一致，只需要把事件传参改为item.productID即可。

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