英文:
Vuetify 3 change color in selection
问题
你好，我理解你的请求，以下是翻译好的部分：
"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
得分: 0
VListItem的#default插槽中传递的slot属性被命名为isActive，而不仅仅是active，因此您必须使用isActive或重命名它：
<v-list-item
...
v-slot="{ isActive: active }"
>
英文:
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 }"
>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论