如何在点击时突出显示v-list-item ?(Vue)

Question

我有一个侧菜单，它会根据所选择的路由器型号而变化。我试图有被选中的页面被突出显示单击。我希望我的子菜单有这种行为:https://codepen.io/Jayesh_v/pen/eYBjLrq

下面是我代码中的前两个子菜单:当前菜单的UI。

<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"one_answers";isGuestWifiActive"。正如您所看到的，如果我尝试为每个子菜单添加不同的变量，这将变得非常长且复杂。我是否需要为每个子菜单创建一个全新的变量，或者我是否可以以某种方式为所有子菜单使用相同的变量?

编辑:

就像@DvidSilva建议的那样，我创建了第二个名为"openmenu"的变量。并使用该变量跟踪打开了哪个页面。(即openMenu = "Main Wi-Fi"然后，我使用条件类绑定来应用我的"活动"类，当openMenu匹配它所在的页面时。下面是我的一个v-list项目:

<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>

Answer 1

如果您正在使用Vuetify 2。x，当一个项目被选中时，v-list-group有一个道具active-class:https://v2.vuetifyjs.com/en/api/v-list-group/

你可以更新它并添加你的自定义CSS类，就像你的codepen示例。