Vue.js侧边栏菜单切换异常：点击第二项无法立即展开

我来帮你排查下这个问题～ 你当前的代码里，isActive是一个全局的布尔状态，这就是导致异常的核心原因：

当第一个菜单项展开时，isActive是true。此时点击第二个菜单项，你先把activeItemId设为第二个的索引，然后执行this.isActive = !this.isActive，把isActive改成了false。这时候就算activeItemId匹配第二个项，因为isActive是false，对应的show类也加不上，所以第二个项没法展开。

修复方案 #

我们可以去掉全局的isActive，直接通过activeItemId和当前菜单项的索引是否匹配来控制展开状态，同时支持点击同一菜单项时收起：

修改后的脚本代码

new Vue({
  el: '#app',
  methods: {
    setActiveItemId(itemIndex) {
      // 如果点击的是当前已激活的项，就清空activeItemId（收起）；否则设置为当前索引（展开）
      this.activeItemId = this.activeItemId === itemIndex ? '' : itemIndex
    }
  },
  data: {
    message: 'Hello Vue.js!',
    activeItemId: '',
    sideBar: [
      { name: "Dashboard", url: "/dashboard" },
      { name: "User Management", url: "/users" },
      { name: "Settings", url: "/settings" }
    ]
  }
})

对应的模板示例

假设你的模板是这样的，通过activeItemId匹配当前项的索引来添加show类：

<div id="app">
  <ul class="sidebar">
    <li 
      v-for="(item, index) in sideBar" 
      :key="index"
      :class="{ show: activeItemId === index }"
      @click="setActiveItemId(index)"
    >
      <a :href="item.url">{{ item.name }}</a>
      <!-- 如果有子菜单的话，这里可以放子菜单内容 -->
      <div class="submenu" v-show="activeItemId === index">
        <!-- 子菜单项 -->
      </div>
    </li>
  </ul>
</div>

为什么这样改？ #

• 去掉全局的isActive后，每个菜单项的展开状态完全由activeItemId和自身索引的匹配关系决定，逻辑更清晰。
• 点击不同菜单项时，activeItemId直接切换为对应索引，旧的激活项自动收起，新的项展开，完全符合你的预期。
• 点击同一已展开的菜单项时，activeItemId被清空，菜单项收起，也支持了折叠功能。

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