Vue单组件多下拉菜单无法单独控制问题求助

你现在的问题是所有下拉菜单共用了同一个isOpen变量，不管点击哪个按钮，所有菜单都会同步开关，没法单独控制。要实现独立开关，必须给每个下拉菜单分配专属的状态变量：

方案一：给每个列表项添加独立开关状态 #

1. 初始化数据时为每个item追加isOpen属性 #

data() {
  return {
    items: [
      { content: '菜单1内容' },
      { content: '菜单2内容' },
      { content: '菜单3内容' }
    ]
  }
},
mounted() {
  // 给每个item添加默认关闭的isOpen属性
  this.items = this.items.map(item => ({ ...item, isOpen: false }))
}

2. 修改模板绑定当前项的状态 #

<div v-for="(item, index) in items" :key="index"> 
  <div class="dropdown">
    <button @click="item.isOpen = !item.isOpen">展开/收起</button>
    <div v-show="item.isOpen">{{ item.content }}</div>
  </div>
</div>

这种方式不需要单独写showInfo方法，直接在点击事件里切换当前项的isOpen状态即可。

方案二：用独立数组维护每个索引的开关状态 #

1. 添加状态数组并初始化 #

data() {
  return {
    items: [/* 你的列表数据 */],
    openStates: []
  }
},
mounted() {
  // 根据items长度生成全为false的状态数组，初始所有菜单关闭
  this.openStates = new Array(this.items.length).fill(false)
}

2. 修改模板和方法 #

<div v-for="(item, index) in items" :key="index"> 
  <div class="dropdown">
    <button @click="showInfo(index)">展开/收起</button>
    <div v-show="openStates[index]">{{ item.content }}</div>
  </div>
</div>

showInfo(index) {
  // Vue3直接修改数组元素即可触发响应式更新
  this.openStates[index] = !this.openStates[index]
  
  // 如果是Vue2，需要用$set确保响应式：
  // this.$set(this.openStates, index, !this.openStates[index])
}

两种方案都能实现下拉菜单独立开关，可根据你的数据结构需求选择。

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