changing the background color of a v-list header - vue.js

Question

I am tying to change the color of a v-list header item. I seem to only be able to change the colour of the title but not the whole tile. Note that I need this to be reactive since the background color I am trying to change will not remain the same over time.
I have tried using the color property on the v-list-tile-content but it does not do anything. Then I tried the same on the v-list-tile-title but this only changes the title part not the action/avatar part
In other words it's like changing the colour of the Dining title in the following codepen https://codepen.io/patrick2009/pen/pmdgNz
<v-list-tile-content color="red">
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
Something like that would be nice!
Thanks guys,
Pat

Answer 1

EDIT: I have updated my answer to show how you can add css dynamically, using props.
Example:
const myList = {
template: "#my-list",
props: ["color", "hover"],
mounted() {
var css = `
.v-list__group__header {
background-color: ${this.color};
}
.v-list__group__header:hover {
background-color: ${this.hover} !important;
}
`;
var style = document.createElement("style");
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName("body")[0].appendChild(style);
},
data() {
return {
items: [{
action: "local_activity",
title: "Attractions",
items: [{
title: "List Item"
}]
},
{
action: "restaurant",
title: "Dining",
active: true,
items: [{
title: "Breakfast & brunch"
},
{
title: "New American"
},
{
title: "Sushi"
}
]
},
{
action: "school",
title: "Education",
items: [{
title: "List Item"
}]
},
{
action: "directions_run",
title: "Family",
items: [{
title: "List Item"
}]
},
{
action: "healing",
title: "Health",
items: [{
title: "List Item"
}]
},
{
action: "content_cut",
title: "Office",
items: [{
title: "List Item"
}]
},
{
action: "local_offer",
title: "Promotions",
items: [{
title: "List Item"
}]
}
]
};
}
};
new Vue({
el: "#app",
components: {
myList
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<my-list color="red" hover="blue"></my-list>
</v-flex>
</v-layout>
</v-app>
</div>
<script type="text/x-template" id="my-list">
<v-card>
<v-toolbar color="teal" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Topics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-list>
<v-list-group v-for="item in items" :key="item.title" v-model="item.active" :prepend-icon="item.action" no-action>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile v-for="subItem in item.items" :key="subItem.title" #click="">
<v-list-tile-content color="red">
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-card>
</script>
[CodePen Mirror]
Old Answer:
Looks like you have to set this via css for that class.. The class you'll have to target is v-list__group__header.
EDIT: You can also use a :hover "event" to change the background-color on hover - unfortunately, this requires you to use the !important modifier, which is typically frowned upon. Figured I would mention it regardless.
.v-list__group__header:hover {
background-color: blue !important;
}