0

I want to bind a class to the selected value in my v-select. Currently I have the following:

<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>
</v-select>

However, the slot class only applies to values in the list, but not the selected value.

How can I also apply the class of '_inactive' to the selected value?

raaf
  • 47
  • 6
  • What's `v-select`? Are you using Vuetify? – slauth Jul 30 '21 at 09:29
  • it's from Vue Select package, a dropdown component – raaf Jul 30 '21 at 09:40
  • 1
    Could you provide more context ? (ie: `optionList` array) Also, I'm not sure to understand the question but if you need to apply style to the selected value, you might want to look at the [`selected-option`](https://vue-select.org/api/slots.html#selected-option) slot – nook Jul 30 '21 at 10:28
  • 1
    I managed to use the slot selected-option and made it work, thanks! – raaf Jul 30 '21 at 11:16

0 Answers0