如何在v-for循环中让按钮仅触发点击项的隐藏菜单？

嘿，这个问题我之前也碰到过！核心问题在于你现在所有循环项都共用了同一个clicked变量，所以一点击所有菜单都会跟着切换状态。下面给你两种最优的实现方式，看哪种更适合你的场景：

方法一：用数组跟踪每个项的状态 #

这种方法简单直接，适合逻辑比较基础的场景。我们把单个布尔值改成数组，让每个索引对应一个独立的状态：

<template>
  <div v-for="(i, index) in 3" :key="index">
    <v-btn @click="clicked[index] = !clicked[index]">Menu</v-btn>
    <p v-show="clicked[index]">hidden menu</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clicked: [] // 初始为空数组，Vue会自动处理响应式
    }
  }
}
</script>

这样每个循环项的菜单状态都由数组中对应索引的值控制，点击哪个按钮就只会切换当前项的状态，完全不会影响其他项。如果担心数组索引初始化的问题，也可以在created钩子中提前初始化数组：

created() {
  this.clicked = new Array(3).fill(false)
}

方法二：组件化拆分（推荐复杂场景） #

如果后续每个循环项可能会增加更多交互逻辑，把每个项封装成独立组件会更符合Vue的组件化思想，也更易维护：

首先创建子组件（比如MenuItem.vue）：

<template>
  <div>
    <v-btn @click="clicked = !clicked">Menu</v-btn>
    <p v-show="clicked">hidden menu</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clicked: false // 每个组件自己维护独立状态
    }
  }
}
</script>

然后在父组件中循环使用这个子组件：

<template>
  <div v-for="(i, index) in 3" :key="index">
    <menu-item></menu-item>
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: {
    MenuItem
  }
}
</script>

每个子组件都拥有自己独立的clicked状态，相互之间完全隔离，后续要给菜单加更多功能（比如点击外部关闭、菜单内容个性化）时，直接在子组件里修改即可，非常方便。

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