Блог

Как скрыть флажок в меню автозаполнения Vuetify с несколькими вариантами?

 <v-autocomplete
  v-model="filters.colors"
  :loading="autocomplete.colors.loading"
  :items="autocomplete.colors.menu"
  :search-input.sync="autocomplete.colors.input"
  cache-items
  hide-no-data
  hide-details
  label="Color(s)"
  dense
  multiple
  clearable
  item-text="name"
  :menu-props="{
    closeOnContentClick: true,
  }"
  @change="selectionChanged('colors')"
>
  <template v-slot:selection="data">
    <v-chip
      v-bind="data.attrs"
      :input-value="data.selected"
      close
      x-small
      @click:close="removeChip(data.item, 'colors')"
    >
      {{ data.item.name }}
    </v-chip>
  </template>
</v-autocomplete>
  

Используйте item слот компонента v-автозаполнения:

 <v-autocomplete
  v-model="filters.colors"
  :loading="autocomplete.colors.loading"
  :items="autocomplete.colors.menu"
  :search-input.sync="autocomplete.colors.input"
  cache-items
  hide-no-data
  hide-details
  label="Color(s)"
  dense
  multiple
  clearable
  item-text="name"
  :menu-props="{
    closeOnContentClick: true,
  }"
  @change="selectionChanged('colors')"
>
  <template v-slot:selection="data">
    <v-chip
      v-bind="data.attrs"
      :input-value="data.selected"
      close
      x-small
      @click:close="removeChip(data.item, 'colors')"
    >
      {{ data.item.name }}
    </v-chip>
  </template>
  <template v-slot:item="{ item }">
    {{item.name}}
  </template>
</v-autocomplete>