Удаление набранного текста из v-vitetify v-autocomplete после выбора выпадающего элемента - PullRequest
Новая
       32

Удаление набранного текста из v-vitetify v-autocomplete после выбора выпадающего элемента

0 голосов
/ 27 июня 2019

У меня есть это поле 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. пользователь имеет выпадающий список для выбора элементов из

enter image description here

  1. пользователь начинает вводить элемент для фильтрации

enter image description here

  1. затем пользователь выбирает элемент, но исходный текст остается в поле

enter image description here

1 Ответ

1 голос
/ 28 июня 2019

Хм, это было интересно, но переход к действительному коду компонента выявил реквизит "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, который ничего не делает.

...