我有一个组合框:
<v-combobox
v-model="selectedCategories"
:items="attributeCategories"
item-text="name"
item-value="id"
label="Category"
multiple
chips
v-on:blur="changeCategory(selectedCategories)"
></v-combobox>
它的渲染如下所示:
我想在每个徽章上添加一个x
,这样我就可以快速删除它。
是否有需要打开的设置?
在常规输入类型的文本中,我可以添加这些属性
- 清除图标=“mdi-闭合圆”
- 可清除的
3条答案
按热度按时间pftdvrlh1#
VComboBox
的selection
槽允许定制选择的呈现,你可以添加一个VChip
,它有一个VIcon
子项,当点击它时,它会重新选择项目(从而切换它的选择,并移除芯片):demo
ars1skjm2#
您可以通过在
<v-slot>
模板中的<v-chip>
内添加<v-icon>
来简单地实现这一点。我刚刚使用上面提到的截图中的相同数据集创建了工作演示。演示**:**
yi0zb3m43#
有一个芯片 prop 你的
<v-combobox...>
-所以取决于Vuetify版本有两个 prop 你应该添加:*可删除芯片用于Vuetify 2(根据文档)
*Vuetify 3的可关闭芯片(根据文件)
此外,还有clearableprop,在右侧添加清除按钮,通过一次点击清除所有芯片(适用于两个Vuetify版本):