Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 212
Pillo Avatar asked May 21 '20 18:05

Pillo


1 Answers

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.

like image 181
Yom T. Avatar answered Sep 20 '22 13:09

Yom T.