vue.jsvuejs2vuetify.jsv-select

Change style and colors of chips in v-select


How can I change the color and style of chips in v-select?

I have code like this:

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint
>
</v-select>

enter image description here

How can I change chips to styled label and color blue?


Solution

  • You probably want the selection slot.

    <v-select
      v-model="value"
      :items="roles"
      :menu-props="{ top: true, offsetY: true }"
      small-chips
      label="Roles"
      multiple
      hint="Select the role"
      persistent-hint>
      <template #selection="{ item }">
        <v-chip color="blue">{{item.name}}</v-chip>
      </template>
    </v-select>
    

    Where item.name would depend on these individual items of roles.