Как очистить ввод v-autocomplete (множественный) поиска после установки флажка в раскрывающемся списке?

Question

У меня есть несколько компонентов v-autocomplete от Vuetify.В настоящее время, например, если ввести в поисковый ввод «Cali» и проверить значение «California», значение «Cali» все еще существует в поисковом вводе.Мне нужно очистить введенное значение.Для текущего значение поиска очищается при закрытии раскрывающегося списка, но мне нужно очистить его, когда я установил флажок.

<v-autocomplete
        v-model="select"
        :loading="loading"
        :items="items"
        :search-input.sync="search"
        cache-items
        class="mx-3"
        flat
        hide-no-data
        hide-details
        label="What state are you from?"
        solo-inverted
        multiple
      ></v-autocomplete>

new Vue({
  el: '#app',
  data () {
    return {
      loading: false,
      items: [],
      search: null,
      select: null,
      states: [
        'Alabama',
        'Alaska',
        'American Samoa',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'District of Columbia',
        'Federated States of Micronesia',
        'Florida',
        'Georgia',
        'Guam',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Marshall Islands',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New Hampshire',
        'New Jersey',
        'New Mexico',
        'New York',
        'North Carolina',
        'North Dakota',
        'Northern Mariana Islands',
        'Ohio',
        'Oklahoma',
        'Oregon',
        'Palau',
        'Pennsylvania',
        'Puerto Rico',
        'Rhode Island',
        'South Carolina',
        'South Dakota',
        'Tennessee',
        'Texas',
        'Utah',
        'Vermont',
        'Virgin Island',
        'Virginia',
        'Washington',
        'West Virginia',
        'Wisconsin',
        'Wyoming'
      ]
    }
  },
  watch: {
    search (val) {

      val && val !== this.select && this.querySelections(val)
    }
  },
  methods: {
    querySelections (v) {

      this.loading = true
      // Simulated ajax query
      setTimeout(() => {
        this.items = this.states.filter(e => {
          return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
        })
        this.loading = false
      }, 500)
    }
  }
})

Я хочу очистить значение в поиске после выбора значения в раскрывающемся списке.Вот пример кода - https://codepen.io/anon/pen/ZZMKeL

Answer 1

Добавить наблюдателя для выбора значения и сброса search-input:

watch: {
  select() {
    this.search = ''
  }

Или отреагируйте на одно из событий:
<v-autocomplete @input="search = ''"
или
<v-autocomplete @change="search = ''"

---

Наблюдайте select из-за значения v-model (<v-autocomplete v-model="select") и меняйте
this.search из-за значения search-input.sync (:search-input.sync="search").