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:
When working with the <v-select> component in Vue.js projects, it's wise to make use of the configuration options provided by vuetify.js. By doing so, you can set up the component once and avoid repeating the same configuration code throughout your project. This approach not only helps to reduce code duplication but also makes it easier to maintain and update your instances globally.
export default createVuetify({
defaults: {
VSelect:{
VChip:{
closeIcon:"fa-solid fa-xmark",
class:".........",
style:"..."
}
},
}
})
