如何在v-autocomplete中着色一个芯片(Vuetify)

o7jaxewo 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(115)

我想选择一个芯片，符合一定的标准，有一个不同的颜色比所有其他人。如何在Vuetify中做到这一点？也许用其他比v-自动完成更好的方法？我正在使用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>

字符串
感谢您的任何帮助：）我描述了我希望发生在上面的事情。

vue.js

来源：https://stackoverflow.com/questions/76744343/how-to-colorize-one-chip-in-v-autocomplete-vuetify

1条答案

按热度按时间

kkbh8khc1#

使用芯片v-slot并为 * 所有 * 芯片提供您自己的自定义芯片内容，然后根据您想要的任何条件绑定一个类。然后，类名可以改变满足您的条件的芯片的样式。
在这个最小的例子中，具有属性name的所选对象的芯片具有值"Britta Holt"将被着色为红色：

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示例

Vuetify 2

概念是一样的，但插槽不同。使用选择槽代替

<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

赞(0）回复(0）举报 2023-08-07

我来回答

如何在v-autocomplete中着色一个芯片(Vuetify)

1条答案

Vuetify 3

Vuetify 2

相关问题

热门标签

最新问答