Vuetify3：如何禁用v-list-item的取消选中功能？

问题出在Vuetify的v-list-item默认自带选中状态切换逻辑，就算绑定了selectedUser的赋值操作，它内部仍会自动切换高亮状态。要阻止已选中项取消高亮，有两种简单实现方式：

方式一：手动控制激活状态 #

通过:active绑定选中状态，同时修改点击事件，仅在点击非选中项时更新selectedUser：

修改后的模板代码：

<template>
<v-app>
   <v-card>
      <v-list>
         <v-list-item 
         v-for="user in users" :key="user.name" 
         @click="selectedUser !== user && (selectedUser = user)"
         :value="user"
         color="primary"
         :active="selectedUser === user">
            <v-list-item-title>{{user.name}}</v-list-item-title>
            <v-list-item-subtitle>{{user.age}}</v-list-item-subtitle>
         </v-list-item>
      </v-list>
      <br><br>
      <p>
         Selected User: {{selectedUser?.name}}
      </p>
   </v-card>
</v-app>
</template>

• :active="selectedUser === user"：让高亮状态完全由selectedUser控制，只有当前项是选中用户时才保持高亮
• @click="selectedUser !== user && (selectedUser = user)"：点击已选中项时不执行任何操作，避免触发默认的取消高亮逻辑

方式二：利用v-list的单选绑定 #

给v-list添加v-model绑定selectedUser，让列表自动管理选中状态（单选模式下默认不允许取消选中）：

修改后的模板代码：

<template>
<v-app>
   <v-card>
      <v-list v-model="selectedUser">
         <v-list-item 
         v-for="user in users" :key="user.name" 
         :value="user"
         color="primary">
            <v-list-item-title>{{user.name}}</v-list-item-title>
            <v-list-item-subtitle>{{user.age}}</v-list-item-subtitle>
         </v-list-item>
      </v-list>
      <br><br>
      <p>
         Selected User: {{selectedUser?.name}}
      </p>
   </v-card>
</v-app>
</template>

这种方式更简洁，v-list会自动处理选中逻辑，点击已选中项时不会取消高亮，同时selectedUser也会同步保持选中值。

内容的提问来源于stack exchange，提问作者sweet-pineapple