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 we use selection slot to customize the chip as we want like @YomS. show above, we cannot use chips and deletable-chips props to make that chip deletable.
For anyone also need to implement deletable-chips in selection slot, here my snippet:
<template>
<v-select
v-model="styleSelection" // Linking that v-select to one array
clearable
multiple
:items="travelStyles"
label="Travel Style"
>
<template #selection="{ item }">
<v-chip
color="primary"
close
@click:close="deleteChip(item, styleSelection)" // call a method deleteChip
>{{ item }}</v-chip
>
</template>
</v-select>
</template>
<script>
export default {
data: () => ({
styleSelection: [],
travelStyles: [
'Discovery',
'Family',
'In-depth Cultural',
'Historical',
'Food & Culinary',
'Adventure',
'Beach',
'Hiking & Trekking',
'Bicycle',
'Sightseeing',
'Boat',
'River Cruise',
'Ocean Cruise',
],
}),
methods: {
deleteChip(itemNeedToRemove, array) {
for (let i = 0; i < array.length; i += 1) {
if (array[parseInt(i, 10)] === itemNeedToRemove) {
array.splice(i, 1);
}
}
},
},
};
</script>
Beside Selects v-select, it also works with Autocomplete v-autocompletes, the snippet is exactly the same.
If you want to customize the chip color and make it deletable in V-autocompletes, you can take the look on the code below:
<v-autocomplete
v-model="citySelection"
clearable
multiple
:items="city"
label="Where do you want to go?"
:search-input.sync="search"
@change="search = ''"
>
<template #selection="{ item }">
<v-chip
close
color="primary"
@click:close="deleteChip(item, citySelection)"
>{{ item }}</v-chip
>
</template>
</v-autocomplete>
I have been in your shoes and I think that, if you need deleteable chips, reimplementing the delete chip functionality just for the sake of changing a color is an overkill.
Since your goal is stylistic I would suggest that you use a simple scss solution:
<template>
<v-select
class="mySelect"
v-model="value"
:items="roles"
:menu-props="{ top: true, offsetY: true }"
small-chips
label="Roles"
multiple
hint="Select the role"
persistent-hint
deletable-chips
>
</v-select>
</template>
<script>
export default {
data() {
return {
roles: ['role1', 'role2'],
}
},
}
</script>
<style lang="scss" scoped>
.mySelect::v-deep .v-chip {
/* chip background color */
background-color: var(--v-primary-base);
/* chip text color */
color: white;
/* chip X color */
button {
color: white;
}
}
</style>
Notice the .mySelect::v-deep selector that enables the rule to apply in the specific element, even in a scoped style block.
EDIT: