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!

skirtle skirtle · Accepted Answer · 2019-09-28T21:15:01

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.

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

1 Answers