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>
How can I change chips to styled label and color blue?
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With