Vuetify3：如何禁用取消选择 v-list-item？

Question

我有一个显示的姓名列表。当我单击某个项目时，它会以蓝色（原色）突出显示，当我再次单击它时，突出显示会被删除，但

selectedUser

保持不变。如何防止已选定项目的突出显示被删除？

<script setup>
import {ref} from "vue";

const users = ref([
      {name: "John", age: 25},
      {name: "Jane", age: 24},
      {name: "Doe", age: 26},
      {name: "Smith", age: 27},
]);

const selectedUser = ref(null);
</script>


<template>
<v-app>
   <v-card>
      <v-list>
         <v-list-item 
         v-for="user in users" :key="user.name" 
         @click="selectedUser=user"
         :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>

Answer 1

当您单击某个项目时，它会标记为

active

。当您再次单击它时，此状态将被删除。所以你必须手动添加类。

<script setup>
import {ref} from "vue";

const users = ref([
      {name: "John", age: 25},
      {name: "Jane", age: 24},
      {name: "Doe", age: 26},
      {name: "Smith", age: 27},
]);

const selectedUser = ref(null);
</script>


<template>
<v-app>
   <v-card>
      <v-list>
         <v-list-item 
         v-for="user in users" :key="user.name" 
         @click="selectedUser=user"
         :value="user"
         :class="{'v-list-item--active': user.name === selectedUser.name}"
         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>