如何隐藏Vuetify自动完成菜单中的复选框和多个选项

Question

如何隐藏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>

Answer 1

使用v-autocomplete组件的item插槽：

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