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

Question

I would like a selected chip that meets certain criteria to have a different color than all others. How can i do that in Vuetify? Mayby something else than v-autocomplete would be better? I am using Vuetify 2.0

  <v-autocomplete
    :value="value"
    :items="usersItems"
    :loading="isLoadingData"
    :search-input.sync="searchUsers"
    outlined
    chips
    small-chips
    deletable-chips
    clearable
    item-text="full_name"
    :item-value="getValueWrapper"
    label="Użytkownicy"
    placeholder="Wpisz by wyszukać"
    multiple
    @input="handleInput"
    @change="$emit('change', value)"
  >
    <template #prepend-item>
      <v-list-item
        @click="addAllUsers"
      >
        <v-list-item-action>
          <v-icon color="primary">
            mdi-plus
          </v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>
            {{ $t('users_picker.add_all') }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-divider class="mt-2" />
    </template>
    <template #item="data">
      <template v-if="typeof data.item !== 'object'">
        <v-list-item-content v-t4ext="data.item" />
      </template>
      <template v-else>
        <v-list-item-avatar>
          <img
            v-if="data.item.avatar_public_path"
            :src="data.item.avatar_public_path"
          >
          <v-icon v-else>
            mdi-account-circle
          </v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title v-html="data.item.full_name" />
          <v-list-item-subtitle>
            {{ data.item.email }}
          </v-list-item-subtitle>
        </v-list-item-content>
      </template>
    </template>
  </v-autocomplete>

Thanks for any help :) I described what i expect to happen on top.

Answer 1

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