Vue+Vuetify：点击按钮时如何仅显示单个循环生成的v-menu？

核心思路是放弃全局布尔值的v-model，改用存储当前激活菜单ID的方式，通过用户ID匹配来控制单个菜单的显示状态，具体实现步骤如下：

1. 替换全局布尔变量
   把原来控制菜单显示的全局布尔值，改成存储激活菜单ID的变量：

data() {
  return {
    activeMenuId: null, // 初始无激活菜单
    users: [/* 你的用户数据数组 */]
  }
}

2. 修改v-menu的绑定逻辑
   将v-menu的v-model从全局布尔值，改为判断当前用户ID是否等于激活ID：

<v-col v-for="userInfo in users" :key="userInfo.id">
  <v-btn @click="toggleMenu(userInfo.id)">打开菜单</v-btn>
  
  <v-menu 
    v-model="activeMenuId === userInfo.id"
    @close="activeMenuId = null"
  >
    <!-- 菜单内容示例 -->
    <v-list>
      <v-list-item>编辑用户</v-list-item>
      <v-list-item>删除用户</v-list-item>
    </v-list>
  </v-menu>
</v-col>

3. 实现菜单切换逻辑
   添加点击按钮的切换方法，点击时如果当前菜单已激活就关闭，否则激活：

methods: {
  toggleMenu(userId) {
    this.activeMenuId = this.activeMenuId === userId ? null : userId
  }
}

关键说明 #

• 每次点击按钮只会改变对应ID菜单的状态，其他菜单不受影响
• 菜单的@close事件用于在点击页面其他区域关闭菜单时，重置激活ID，避免状态不一致
• 这种方式天然支持同时仅打开一个菜单的需求，完全适配你的业务场景

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