Vue.js v-for渲染下拉菜单时点击操作数据错位如何解决

你的代码存在3个核心问题，按以下步骤修改即可解决操作错位的问题：

• 计算属性原地修改原数组
  Array.sort()和Array.reverse()都是原地修改数组的方法，你在计算属性里直接调用这两个方法修改原始的players数组，会破坏Vue的响应式追踪，导致数据和渲染顺序错位。
  修复后的计算属性代码如下，先拷贝原数组再排序，不要改动原始数据，同时简化倒序逻辑：

  computed: {
      orderPlayers: function(){
          // 浅拷贝原数组后排序，避免修改原数组，b-a直接实现积分倒序
          return [...this.players].sort((a, b) => b.points - a.points)
      }
  }
  

• v-for使用索引作为key导致节点复用错误
  你给:key绑定的是循环索引index，当数组排序顺序变化时，Vue会按照key值复用DOM节点，直接导致节点绑定的player数据和实际渲染位置不匹配。
  修复方式：给每个玩家对象添加固定唯一的id字段，用唯一id作为key：

  data: {
      players: [
          {id: 1, name: 'Quentin', points: 0},
          {id: 2, name: 'Kevin', points: 0}
      ]
  }
  

  模板中v-for部分修改为：

  <div v-for="player in orderPlayers" :key="player.id" class="element">
  

• 重复ID+原生onclick事件导致下拉菜单始终匹配第一个元素
  你在v-for循环里给所有下拉菜单都写了固定idactionDropdown，HTML规范要求id全局唯一，重复id时浏览器永远只会匹配页面中第一个同id元素。再加上你用原生onclick="showDropdown()"绑定事件，全局的showDropdown方法如果通过id查找下拉元素，永远只会操作第一个玩家的菜单，最终所有加分操作都落在第一个玩家身上。另外循环里的name、points也写了固定id，同样属于重复id问题，统一替换为class即可。
  修复方式：删掉硬编码的重复id，抛弃原生DOM操作的下拉菜单逻辑，用Vue状态控制菜单显隐：
  首先在data里添加控制菜单显隐的字段：

  data: {
      // ...原有players数据
      activePlayerId: null // 记录当前打开菜单对应的玩家id
  }
  

  下拉菜单部分模板修改为：

  <div class="dropdown">
      <!-- 替换原生onclick为Vue事件绑定，点击时设置当前激活玩家id -->
      <button class="dropbtn" @click.stop="activePlayerId = player.id">
          <i class="fa-solid fa-ellipsis-vertical"></i>
      </button>
      <!-- 仅当前玩家id匹配激活id时显示菜单，点击菜单项后关闭菜单 -->
      <div v-show="activePlayerId === player.id" class="dropdown-content" @click.stop="activePlayerId = null">
          <!-- 加.prevent阻止a标签默认跳转行为 -->
          <a href="#" @click.prevent="player.points+=2">A marqué 2</a>
          <a href="#" @click.prevent="player.points +=5">A marqué 5</a>
      </div>
  </div>
  

  最后给页面根节点加个点击事件，点击空白处时把activePlayerId设为null关闭菜单即可，完全不需要写原生的showDropdown方法。

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