Vuetify v-list二次点击已激活项时激活状态消失问题问询

问题原因 #

v-list-item-group 组件默认支持取消选中逻辑，当你二次点击已经处于激活状态的菜单项时，组件会自动取消该项的选中状态，因此绑定的v-model会被赋值为undefined，激活样式也会同步消失。

解决方法 #

只需要给v-list-item-group添加mandatory属性即可，该属性会强制组件必须保留至少一个选中项，不允许手动取消已选中的条目，二次点击已激活项时不会触发取消逻辑，绑定的v-model也会始终保留当前选中的值。

修改后的pug模板代码： #

v-list(dense)
  v-list-item-group(color="success" v-model="selectedItem" mandatory)
    v-list-item(v-for="(gallery, key) in galleries" :key="key")
      v-list-item-content
        v-list-item-title(v-text="gallery")

补充说明 #

• 如果你的业务场景允许初始状态无选中项，可以搭配mandatory="force"属性使用，初始时可以无选中值，一旦用户选中任意项后就无法再取消，必须保持有一个选中状态。
• 上述方法对Vuetify2和Vuetify3版本的v-list组件均适用。

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