드롭다운 목록에서 확인란을 선택한 후 v-자동 완성(복수) 검색 입력을 지우는 방법

드롭다운 목록에서 확인란을 선택한 후 v-자동 완성(복수) 검색 입력을 지우는 방법

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

선택 값 및 재설정을 위한 감시자 추가search-input:

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

또는 다음 이벤트 중 하나에 반응하십시오.
<v-autocomplete @input="search = ''"
또는
<v-autocomplete @change="search = ''"

---

Watch select because of v-model value ( <v-autocomplete v-model="select"), and change
this.search because of search-input.sync value ( :search-input.sync="search").

참조URL: https://stackoverflow.com/questions/55808628/how-to-clear-v-autocomplete-multiple-search-input-after-selecting-the-checkbox