gpt4 book ai didi

vue.js - 如果搜索值为空 Vuetify,如何在 Combobox 中隐藏菜单?

转载 作者:行者123 更新时间:2023-12-05 02:12:25 33 4
gpt4 key购买 nike

我有一个简单的 Combobox 组件

我希望它在输入为空时隐藏菜单部分(因此在找不到匹配项时)。
并在找到匹配项时再次显示。
我无法在文档中的组合框和菜单 Prop 中找到任何内容。

我们将不胜感激。

<v-combobox
v-model="select"
:items="states"
:search-input.sync="search"
label="Select a favorite activity or create a new one"
></v-combobox>

new Vue({
el: '#app',
data () {
return {
select: 'Any value',
search: null,
items: [],
states: [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
]
}
},
watch: {
search (val) {
if(val && val !== this.select) {
this.querySelections(val)
} else {
console.log(val)
}
}
},
methods: {
querySelections (v) {
// Simulated ajax query
setTimeout(() => {
this.items = this.states.filter(e => {
return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
})
}, 500)
}
}
})

更新

我想我找到了解决方案

我将 :menu-props="{value: autoselectMenu}" 添加到组合框,然后在我的数据中创建了 autoselectMenu: false 属性。在我的观察者中我做了这个

search (val) {
if(val && val !== this.select) {
this.querySelections(val)
this.autoselectMenu = true
} else if(!val) {
this.autoselectMenu = false
}
}

Link

最佳答案

您可以在 menu-props 属性中传递 value 属性的自定义值,因此当您的 search 为空时将其设置为 false,并且不要传递它,以便它保留默认行为:

<v-combobox :menu-props="menuProps"

// ...

computed: {
menuProps() {
return !this.search ? {value: false} : {}
}
},

编辑
一行:

<v-combobox :menu-props="{ ...(!search && {value:false}) }"

关于vue.js - 如果搜索值为空 Vuetify,如何在 Combobox 中隐藏菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56116972/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com