I am facing an issue with the v-autocomplete component from Vuetify. Currently, when I enter "Cali" in the search input and select "California" from the dropdown list, the "Cali" value remains in the search input field. I need the entered value to be cleared once I select a checkbox. Currently, the search value is only cleared when closing the dropdown list, but my requirement is to clear it upon selecting the checkbox.
<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',
...
'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)
}
}
})
My goal is to clear the value in the search input after selecting a value from the dropdown list. Here is an example on Codepen - https://codepen.io/anon/pen/ZZMKeL