Vue3+Vuetify3如何避免已选中v-list项被点击取消选中状态

方案1：使用v-model:selected绑定选中项 #

Vuetify的v-list原生支持v-model:selected双向绑定，直接将其与你的selectedItem变量绑定，就能自动同步选中状态与UI显示，从根源避免手动维护状态的不一致问题。

示例代码：

<v-list v-model:selected="selectedItem">
  <v-list-group>
    <template v-slot:activator>
      <v-list-item-title>分组标题</v-list-item-title>
    </template>
    <v-list-item value="item1">子项1</v-list-item>
    <v-list-item value="item2">子项2</v-list-item>
  </v-list-group>
  <v-list-item value="item3">独立项</v-list-item>
</v-list>

注意：每个v-list-item的value属性必须唯一；若选中项是对象类型，需保证引用一致，或通过item-value属性指定用于匹配的字段（如item-value="id"）。

方案2：手动控制.v-list-item--active类 #

若不想使用v-model，可通过动态绑定类名强制锁定激活状态，同时重写点击逻辑避免取消选中：

示例代码：

<v-list-item
  :class="{ 'v-list-item--active': selectedItem === 'item1' }"
  @click="selectedItem = 'item1'"
>
  子项1
</v-list-item>

这种方式直接在点击时赋值选中项，跳过组件默认的“点击切换选中”逻辑，再通过类名绑定让UI状态与selectedItem完全同步。

额外注意事项 #

• 若使用v-list-group，需避免分组与子项的选中状态冲突：如果不需要分组可选中，可给分组添加selectable="false"属性；若需要分组选中，需给分组设置唯一value。
• 确保selectedItem是Vue响应式变量（如用ref或reactive声明），否则修改后UI不会实时更新。

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