我有一个根据所选路由器型号而变化的侧菜单。我试图在单击时突出显示所选页面。我希望在子菜单上显示此行为：https://codepen.io/Jayesh_v/pen/eYBjLrq
下面是我的代码中的前两个子菜单：UI of the menu currently.

<v-list-group sub-group :value="true">
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>General settings</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-if="
                (Router_Obj.is_individual_router == true ||
                  Router_Obj.is_individual_router == false) &&
                (routerDetail.router_model == 'FX20' ||
                  routerDetail.group_model == 'FX20')
              "
              value="true"
              @click="menu_change('Main Wi-Fi')"
            >
              <v-list-item-title>Main Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                routerDetail.router_model.substring(0, 4) == 'RG21' ||
                routerDetail.group_model.substring(0, 4) == 'RG21'
              "
              @click="menu_change('Main Wi-Fi')"
            >
              <v-list-item-title>Main Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                (Router_Obj.is_individual_router == true ||
                  Router_Obj.is_individual_router == false) &&
                (routerDetail.router_model == 'FX20' ||
                  routerDetail.group_model == 'FX20')
              "
              @click="menu_change('Guest Wi-Fi')"
            >
              <v-list-item-title>Guest Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                routerDetail.router_model.substring(0, 4) == 'RG21' ||
                routerDetail.group_model.substring(0, 4) == 'RG21'
              "
              @click="menu_change('Guest Wi-Fi')"
            >
              <v-list-item-title>Guest Wi-Fi</v-list-item-title>
            </v-list-item>

我尝试过类绑定，但我似乎找不到一种方法来为所有不同的子菜单使用相同的变量。而不是使用“isActive = false/true”，我觉得我需要使用“isMainWifiActive”和“isGuestWifiActive”。正如你所看到的，如果我尝试为每个子菜单添加一个不同的变量，这将变得相当长和复杂。2我需要为每个子菜单创建一个全新的变量吗？或者我可以用同一个变量来表示所有的变量吗
编辑：
就像@DvidSilva建议的那样，我创建了第二个名为“openMenu”的变量，并使用该变量跟踪哪个页面被打开。（即openMenu =“Main Wi-Fi”）然后我使用条件类绑定来应用我的“active”类，当openMenu匹配它所在的页面时。下面是我的一个v-list-items的样子：

<v-list-item
      v-if="
        routerDetail.router_model.substring(0, 4) == 'RG21' ||
        routerDetail.group_model.substring(0, 4) == 'RG21'
      "
      :class="{'active': openMenu == 'Main Wi-Fi'}"

      @click="menu_change('Main Wi-Fi')"
    >
      <v-list-item-title>Main Wi-Fi</v-list-item-title>
    </v-list-item>