Request in Plain Language
I'm working with a nested v-list that has the following structure:
https://i.sstatic.net/6t2ck.png
The aim is to have the headers "BusinessUnitA" and "TaskY" highlighted (with some background color) when active. Currently, they only highlight on hover. "Task Y" appears in red font when active, but I need it to be highlighted.
Coded Layout
This snippet shows the corresponding HTML template:
<template>
<v-container>
<v-list dense>
<v-list-group
v-for="businessUnit in businessUnits"
:key="businessUnit.businessUnitName"
v-model="businessUnit.active"
no-action
>
<template v-slot:activator>
<v-list-item>
<v-list-item-content >
<v-list-item-title v-text="businessUnit.businessUnitName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list-group
v-for="item in businessUnit.tasks"
:key="item.taskName"
:value="true"
no-action
sub-group
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title v-text="item.taskName"></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item-group>
<v-list-item>
<v-list-item-content>
<v-row>
<v-col
class="d-flex"
cols="6"
sm="6"
>
<v-list-item-avatar>
<v-img :src='item.responsible.avatar'></v-img>
</v-list-item-avatar>
...
</template>
And here's the scripting portion:
<script>
export default {
name: "ZklListNew",
data: () => ({
businessUnits: [
{
businessUnitName: 'BusinessUnit A',
municipality: 'Cityname',
tasks:
[
{
taskName: 'Task Y',
responsible: {
name: 'Max Müller',
email: 'max.mü<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a5a5acbb89bdacbabde7a4a8a0a5e7aaa1">[email protected]</a>',
phone: '+44 77 123 45 67',
avatar: require("@/assets/avatar-placeholder.gif"),
},
deputy: {
name: 'Katharina Knüller',
email: 'katharina.knü<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="452929203705312036316b28242c296b262d">[email protected]</a>',
phone: '+44 77 123 45 67',
avatar: require("@/assets/avatar-placeholder.gif"),
}
}]
},
]
}
),
}
</script>
Troubleshooting Steps Taken
I attempted to use the active class as recommended by the documentation (https://vuetifyjs.com/en/components/list-item-groups/#examples) in this fashion:
Template excerpt:
...
<template v-slot:activator>
<v-list-item>
<v-list-item-content >
<v-list-item-title active-class="border" v-text="businessUnit.businessUnitName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
...
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title active-class="border" v-text="item.taskName"></v-list-item-title>
</v-list-item-content>
</template>
...
As for styling:
<style scoped>
.border {
background-color: red;
}
</style>
I also experimented with adding custom classes like
class="v-list-group__header"Apologies for the lengthy query. I aim for clarity while providing all necessary details.