Vuetify 3中如何为激活状态的v-list-item前置图标？

要实现这个需求，核心是通过绑定列表选中状态来控制图标的显示，具体实现方式如下：

1. 绑定列表选中状态 #

给<v-list>添加v-model跟踪当前激活的列表项，同时为每个<v-list-item>设置:value属性，用来标识每个项的唯一性。

2. 条件渲染前置图标 #

使用v-if判断当前项是否处于激活状态，满足条件时渲染前置图标（推荐用Vuetify内置的<v-list-item-prepend-icon>组件，也可直接使用<v-icon>）。

完整示例代码 #

<template>
  <v-list 
    class="px-15 pt-5" 
    border 
    density="compact"
    v-model="selectedItem" <!-- 绑定选中项状态 -->
  >
    <v-list-item 
      v-for="(item,i) in items" 
      :key="i"
      :value="item" <!-- 设置项的唯一标识 -->
    >
      <!-- 仅当前项激活时显示前置图标 -->
      <v-list-item-prepend-icon v-if="selectedItem === item">
        mdi-check <!-- 替换为你需要的图标名称 -->
      </v-list-item-prepend-icon>

      <v-list-item-content>
        <v-list-item-title v-text="item.text"></v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

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

// 示例列表数据，根据实际业务调整
const items = ref([
  { text: '选项1' },
  { text: '选项2' },
  { text: '选项3' }
])

// 跟踪当前选中的列表项
const selectedItem = ref(null)
</script>

关键细节补充 #

• 如果你的列表项有唯一ID字段（如id），建议用:value="item.id"和v-if="selectedItem === item.id"，避免对象引用比较可能出现的问题
• 若需要多选功能，将selectedItem改为数组类型（ref([])），判断条件改为v-if="selectedItem.includes(item)"
• 图标可替换为Vuetify支持的任意图标，比如mdi-arrow-right、mdi-star等

内容的提问来源于stack exchange，提问作者David H