首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何隐藏带有多个选项的Vuetify菜单中的复选框?

如何隐藏带有多个选项的Vuetify菜单中的复选框?
EN

Stack Overflow用户
提问于 2020-11-12 00:46:22
回答 1查看 405关注 0票数 1

如何隐藏具有多个选项的Vuetify菜单中的复选框?

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-12 18:10:02

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

代码语言:javascript
运行
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64790609

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档