[Vuejs]-How to colorize one chip in v-autocomplete (Vuetify)

by

0👍

✅

Use the chip v-slot and provide your own custom chip content for all chips, but then bind a class based on whatever conditions you want. The classname can then alter the styling of the chips that meet your conditions.

In this minimal example, a chip for a selected object with property name having value "Britta Holt" will be colored red:

Vuetify 3

<v-autocomplete chips :items="people" v-model="selection" >
  <template v-slot:chip="{ props, item }">
    <v-chip
      :class="{ customChip: item.raw.name === 'Britta Holt' }"
      v-bind="props"
      :text="item.raw.name"
    ></v-chip>
  </template>
</v-autocomplete

data() {
  return {
    selection: [],
    people: [
      { name: 'Britta Holt' },
      { name: 'Jane Smith ' },
      { name: 'John Smith' },
    ],
  }
}

<style>
  .customChip {
    background-color: red !important;
  }
</style>

Vuetify Playground example

Vuetify 2

The concept is the same, but the slot is different. Use selection slot instead

<template v-slot:selection="data">
  <v-chip
    :class="{ customChip: data.item.name === 'Britta Holt' }"
    v-bind="data.attrs"
    :input-value="data.selected"
  >
    {{ data.item.name }}
  </v-chip>
</template>

Vuetify 2 codepen

Leave a comment