У меня есть несколько компонентов v-autocomplete от Vuetify. В настоящее время, например, если ввести в поисковом вводе «Кали» и проверить значение «Калифорния», значение «Кали» все еще будет существовать в поисковом вводе. Мне нужно очистить введенное значение. Для текущего значение поиска очищается при закрытии раскрывающегося списка, но мне нужно очистить его, когда я выбираю флажок.
<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)
}
}
})
Я хочу очистить значение при поиске после выбора значения в раскрывающемся списке. Вот пример codepen — https://codepen.io/anon/pen/ZZMKeL



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Добавить наблюдателя для выбора значения и сброса search-input:
watch: {
select() {
this.search = ''
}
Или отреагируйте на одно из событий:<v-autocomplete @input = "search = ''"
или<v-autocomplete @change = "search = ''"
select because of v-model value (<v-autocomplete v-model = "select"), and changethis.search because of search-input.sync value (:search-input.sync = "search").
В моем случае пришлось использовать $nextTick, иначе не работало бы.
На всякий случай, если кто-то еще пытался, я установил поиск на null, и это не сработало. Должна быть пустая строка.
Спасибо!!! Я добавил this.search = ' ' к событию @change, и он работает так, как я ожидал.