选择下拉项后，从vuetify v-autocomplete中清除键入的文本 [英] Clearing out typed text from a vuetify v-autocomplete after drop down item is selected

问题描述

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

I have this v-autocomplete field that has a list of items in a drop down. It's a multiselect, so many items can be selected.

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

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

But the problem I'm having is that when the user starts to type something into the field to filter the list, then selects an item in the list, the users typed text stays in the field, it doesn't get cleared or overwritten by the selected list item.

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

Is there a way to remove this when the list item is selected?

例如.

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

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

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

推荐答案

嗯，这很有趣，但是转到实际的组件代码后，您就会发现这是一个"searchInput"道具.

Hmm this was an interesting one, but going to the actual component code revealed a "searchInput" prop which is what you're after.

因此，您希望您的<autocomplete>包含@input和:search-input属性.

So you want your <autocomplete> to include @input and :search-input properties.

    <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的数据属性:

Then you'll want to include a data property for searchInput:

    data() {
        return {
            ...
            searchInput: null,
            ...
        }
    },

就是这样.

此外，我猜你猜到了:clear-on-select并没有任何作用.

Also, I'm guessing you guessed :clear-on-select which doesn't do anything.

这篇关于选择下拉项后，从vuetify v-autocomplete中清除键入的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！