Vuetify自定义Select插槽无法为下拉选中项设置CSS类问题

核心问题出在ref对象的访问方式，附带可能的类型匹配问题：

1. 未正确访问ref的value属性 #

你定义的selectedCategories是ref响应式对象，但在判断选中状态时直接调用了selectedCategories.includes(item.id)——ref是一个包装对象，必须通过.value才能获取到内部的数组，所以这个判断条件永远返回false，导致选中类无法生效。

修正代码 #

把判断条件改为访问value属性：

<v-list-item v-bind="props" 
             v-html="item.title"  
             :class="{'select-item-hover': true, 'select-item-selected': selectedCategories.value.includes(item.id)}"  
/>

2. 额外检查ID类型匹配 #

如果item.id的类型（比如数字）和selectedCategories中存储的ID类型（比如字符串）不一致，includes也会返回false。可以统一类型后再判断：

// 若item.id是数字，转成字符串匹配
:class="{'select-item-selected': selectedCategories.value.includes(String(item.id))}"

// 或者反过来，把selectedCategories中的值转成数字
:class="{'select-item-selected': selectedCategories.value.map(Number).includes(item.id)}"

3. 确保样式优先级（可选） #

如果修正后样式仍不生效，可能是Vuetify内置的列表项样式优先级更高。可以通过更具体的CSS选择器提升自定义类的优先级：

/* 更具体的选择器 */
.c-select-box .v-list-item.select-item-selected {
  background-color: #e0f2fe; /* 示例样式，替换为你的需求样式 */
}

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