Vuetify 3 change color in selection

Question

hello everyone i am new to the front end , and i ve been learning vuejs for a long time and started to learn vuetify3 these days i am facing a problem where in my code below , i am creatnig a navigation drawer , and my intention is to highlight the icon in red or any other color when its selected and keep the rest icons white

<template>
    <v-navigation-drawer app color="#000000" mini-variant rail-width="110" class="d-flex justify-center mt-8">
        <v-avatar class="d-block text-center mx-auto mt-16 mb-16" size="100">
            <v-btn class="ma-2" fab color="white" rounded icon="mdi-basket" variant="outlined"></v-btn>
        </v-avatar>

        <v-card flat color="#151515">
            <v-layout>
                <v-list dense nav class="d-block mx-auto my-2" active-class="selected">
                    <v-list-item v-for="(item, index) in items" :key="index" class="my-8" v-slot="{ active }"
                        :ripple="false" @click="selectedItem = index" :value="index">
                        <v-icon :color="active ? 'red' : 'white'" :icon="item.icon" class="pa-auto" size="50"></v-icon>
                    </v-list-item>
                </v-list>
            </v-layout>
        </v-card>
    </v-navigation-drawer>
</template>
  
<script>
export default {
    data: () => ({
        selectedItem: 0,
        items: [
            { icon: "mdi-home-outline" },
            { icon: "mdi-cart-outline" },
            { icon: "mdi-store-outline" },
            { icon: "mdi-calendar-check-outline" },
            { icon: "mdi-apps" },
        ],
    }),
};
</script>
  
<style scoped>
.selected {
    background-color: #6f0dff;
}
</style>

  

i dont see where the problem

Answer 1

The slot prop passed to VListItem's #default slot is named isActive, not just active, so you have to use isActive or rename it:

<v-list-item
  ...
  v-slot="{ isActive: active }"
>

playground example