选择下拉项后，从vuetify v-autocomplete中清除键入的文本

Question

我有一个v-autocomplete字段，在下拉列表中有一个项目列表。这是一个多选项目，因此可以选择很多项目。

<v-autocomplete 
  v-model="defendantCode"
  label="Defendant Code"
  :items="defendantCodeOptions"                          
  :loading="defendantCodeIsLoading"
  :filter="customFilter"
  :clear-on-select="true"
  clearable
  multiple
  dense>
</v-autocomplete>

但是我遇到的问题是，当用户开始在字段中键入一些内容以过滤列表，然后在列表中选择一个项目时，用户键入的文本停留在该字段中，不会被清除或被所选列表项覆盖。

选择列表项后，是否可以删除此内容？

例如。

1. 用户具有下拉列表以从中选择项目

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

1. 然后用户选择项目，但初始文本保留在字段中

Answer 1

嗯，这很有趣，但是转到实际的组件代码后，您就会发现这是一个“ 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并没有任何作用。