add class to first item of Vuetify's v-select component

Question

I am using the v-select component from Vuetify and i would like to add a class to the first item of the v-select component to, for example, make the text of the first entry "Item A" appear in red.

It seems that the list of the items is somehow auto-generated and i don"t know how to access the single items.

I have this:

<v-select
    v-model="selected"
    :items="items"
    chips
    label="Some Items"
    multiple
    outlined
    cache-items
></v-select>

Is this possible to make the first entry "Item A" appear red and if, how?

Thanks for your help!

Answer 1

If the first item isn't really an item, like a Select all, then it could be achieved using a prepend-item slot. See https://vuetifyjs.com/en/components/selects#prepend-append-item-slots.

To make just the first item red you could use a :first-child selector. A content-class can be set using menu-props to add a suitable CSS class to the menu itself.

This example demonstrates both of these techniques:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      items: ['Item A', 'Item B', 'Item C'],
      selected1: [],
      selected2: []
    }
  }
})

.red-text {
  color: red;
}

.red-first-item .v-list-item:first-child .v-list-item__title {
  color: red;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-select
          v-model="selected1"
          :items="items"
          chips
          label="Some Items"
          multiple
          outlined
          cache-items
        >
          <template v-slot:prepend-item>
            <v-list-item>
              <span class="red-text">Red item</span>
            </v-list-item>
          </template>
        </v-select>
        <v-select
          v-model="selected2"
          :items="items"
          chips
          label="Some Items"
          multiple
          outlined
          cache-items
          :menu-props="{ contentClass: 'red-first-item' }"
        >
        </v-select>
      </v-container>
    </v-content>
  </v-app>
</div>

Alternatively the item slot can be used to customize the appearance of all the items. That's a bit more complicated though and probably overkill just to make one item red.

I suggest giving the source code a browse:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.ts

It doesn't matter whether you understand all of it, you can still get some insight into how the component is put together and how it builds its menu.