如何给v-select组件的选中选项绑定自定义class？

解决方法 #

你现在只配置了控制下拉列表选项的option插槽，选中后输入框内的展示内容需要单独配置selected插槽实现样式自定义，按照你的逻辑修改后的代码如下：

<v-select :options="optionList"
          :value="activeQuote ? 'Loading ...' : null !== activeOption && activeOption.label !== 'City' ? null : activeOption"
          :placeholder="Please select a choice"
          :disabled="activeQuote">
    <!-- 下拉列表选项插槽，原有逻辑保留 -->
    <template slot="option" slot-scope="option">
       <div :class="option.active != 0 ? '_inactive' : ''">{{option.label}}</div>
    </template>
    <!-- 新增选中值展示插槽，复用同样的class判断逻辑 -->
    <template slot="selected" slot-scope="option">
       <div :class="option.active != 0 ? '_inactive' : ''">{{option.label}}</div>
    </template>
</v-select>

补充说明 #

如果你使用的是 Vuetify 3 版本，插槽写法需要调整为 Vue 3 标准的v-slot语法，其他逻辑不变：

<template v-slot:option="{ item: option }">
   <div :class="option.active != 0 ? '_inactive' : ''">{{option.label}}</div>
</template>
<template v-slot:selected="{ item: option }">
   <div :class="option.active != 0 ? '_inactive' : ''">{{option.label}}</div>
</template>

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