选择下拉项后从 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 时,有没有办法删除它?

例如

  1. 用户已从
  2. 下拉列表到select项

  1. 用户开始输入要过滤的项目

  1. 然后是用户 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 什么也没做。