英文:

Vuetify 3 change color in selection

问题 {#heading}

你好，我理解你的请求，以下是翻译好的部分：

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

我是前端的新手，我学习Vue.js已经有一段时间了，最近开始学习Vuetify3。我在下面的代码中遇到了一个问题，我正在创建一个导航抽屉，我的意图是在选中图标时将其高亮显示为红色或其他颜色，而保持其余图标为白色。

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

我不明白问题出在哪里。 英文:

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

答案1 {#1}

得分: 0

VListItem的#default插槽中传递的slot属性被命名为isActive，而不仅仅是active，因此您必须使用isActive或重命名它：

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

playground示例 英文:

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