选择下拉列表中的复选框后如何清除 v-autocomplete（多个）搜索输入？

Question

我有多个来自 Vuetify 的 v-autocomplete 组件。目前，例如如果在搜索输入中输入“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"）。