我有多个来自 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)
}
}
})
我想在下拉列表中选择值后清除搜索输入中的值。 这是 codepen 示例 - https://codepen.io/anon/pen/ZZMKeL
最佳答案
为选择值添加观察者并重置 search-input :
watch: {
select() {
this.search = ''
}
或者对其中一个事件使用react:
<v-autocomplete @input="search = ''"
或者
<v-autocomplete @change="search = ''"
watch
select因为v-model值 ( <v-autocomplete v-model="select" )，并更改this.search因为search-input.sync值 ( :search-input.sync="search" ).
关于javascript - 选中下拉列表中的复选框后，如何清除 v-autocomplete(多个)搜索输入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55808628/