Vuetify 3导航抽屉选中项图标颜色不生效问题求助

方法1：通过绑定响应式变量+条件色值实现 #

直接利用Vuetify组件的内置属性，结合响应式状态控制选中项的图标颜色：

<template>
  <v-navigation-drawer permanent>
    <v-list>
      <v-list-item 
        v-for="item in menuItems" 
        :key="item.id"
        :active="selectedId === item.id"
        @click="selectedId = item.id"
      >
        <v-list-item-icon>
          <!-- 根据选中状态切换图标颜色 -->
          <v-icon :color="selectedId === item.id ? 'red' : 'white'">
            {{ item.icon }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from 'vue'

// 存储当前选中项的ID
const selectedId = ref(1)
// 示例菜单数据
const menuItems = ref([
  { id: 1, title: '首页', icon: 'mdi-home' },
  { id: 2, title: '设置', icon: 'mdi-cog' },
  { id: 3, title: '用户', icon: 'mdi-account' }
])
</script>

方法2：自定义CSS类控制（更灵活） #

Vuetify会给选中的列表项自动添加v-list-item-active类，通过CSS直接修改对应图标颜色：

如果用作用域样式，需要加深度选择器穿透组件样式：

<style scoped>
/* 选中项图标变红 */
:deep(.v-list-item-active .v-icon) {
  color: red;
}
/* 未选中项图标保持白色 */
:deep(.v-list-item:not(.v-list-item-active) .v-icon) {
  color: white;
}
</style>

全局样式可直接去掉深度选择器。

路由场景适配 #

如果导航和Vue Router绑定，可通过useRoute自动匹配当前路由，切换选中状态：

<template>
  <v-navigation-drawer permanent>
    <v-list>
      <v-list-item 
        v-for="item in menuItems" 
        :key="item.path"
        :to="item.path"
        :active="route.path === item.path"
      >
        <v-list-item-icon>
          <v-icon :color="route.path === item.path ? 'red' : 'white'">
            {{ item.icon }}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const menuItems = ref([
  { path: '/', title: '首页', icon: 'mdi-home' },
  { path: '/settings', title: '设置', icon: 'mdi-cog' },
  { path: '/profile', title: '用户', icon: 'mdi-account' }
])
</script>

注意事项 #

• 若默认样式覆盖自定义颜色，可临时用!important调整优先级（优先通过样式权重优化）
• Vuetify支持内置主题色（如red）或十六进制颜色值（如#ff0000）

内容的提问来源于stack exchange，提问作者ossema daoud