选择下拉项后从 vuetify v-autocomplete 中清除键入的文本
Clearing out typed text from a vuetify v-autocomplete after drop down item is selected
我有这个 v-autocomplete 字段,在下拉列表中有一个项目列表。这是一个 multiselect,可以 select 编辑很多项目。
<v-autocomplete
v-model="defendantCode"
label="Defendant Code"
:items="defendantCodeOptions"
:loading="defendantCodeIsLoading"
:filter="customFilter"
:clear-on-select="true"
clearable
multiple
dense>
</v-autocomplete>
但我遇到的问题是,当用户开始在字段中键入内容以过滤列表,然后 selects 列表中的一个项目时,用户键入的文本仍保留在该字段中,它不会被 selected 列表项清除或覆盖。
当列表项 selected 时,有没有办法删除它?
例如
- 用户已从
下拉列表到select项
- 用户开始输入要过滤的项目
- 然后是用户 select 的项目,但初始文本仍保留在字段中
嗯,这很有趣,但是查看实际的组件代码会发现一个 "searchInput" 道具,这就是您想要的。
因此您希望 <autocomplete>
包含 @input
和 :search-input
属性。
<v-autocomplete
v-model="defendantCode"
label="Defendant Code"
:items="defendantCodeOptions"
:loading="defendantCodeIsLoading"
:filter="customFilter"
clearable
multiple
dense
@input="searchInput=null"
:search-input.sync="searchInput">
</v-autocomplete>
那么您需要为 searchInput
添加数据 属性:
data() {
return {
...
searchInput: null,
...
}
},
就是这样。
另外,我猜你猜到了 :clear-on-select
什么也没做。
我有这个 v-autocomplete 字段,在下拉列表中有一个项目列表。这是一个 multiselect,可以 select 编辑很多项目。
<v-autocomplete
v-model="defendantCode"
label="Defendant Code"
:items="defendantCodeOptions"
:loading="defendantCodeIsLoading"
:filter="customFilter"
:clear-on-select="true"
clearable
multiple
dense>
</v-autocomplete>
但我遇到的问题是,当用户开始在字段中键入内容以过滤列表,然后 selects 列表中的一个项目时,用户键入的文本仍保留在该字段中,它不会被 selected 列表项清除或覆盖。
当列表项 selected 时,有没有办法删除它?
例如
- 用户已从 下拉列表到select项
- 用户开始输入要过滤的项目
- 然后是用户 select 的项目,但初始文本仍保留在字段中
嗯,这很有趣,但是查看实际的组件代码会发现一个 "searchInput" 道具,这就是您想要的。
因此您希望 <autocomplete>
包含 @input
和 :search-input
属性。
<v-autocomplete
v-model="defendantCode"
label="Defendant Code"
:items="defendantCodeOptions"
:loading="defendantCodeIsLoading"
:filter="customFilter"
clearable
multiple
dense
@input="searchInput=null"
:search-input.sync="searchInput">
</v-autocomplete>
那么您需要为 searchInput
添加数据 属性:
data() {
return {
...
searchInput: null,
...
}
},
就是这样。
另外,我猜你猜到了 :clear-on-select
什么也没做。