如果搜索值为空，如何隐藏组合框中的菜单 Vuetify？

Question

我有一个简单的组合框组件

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

任何帮助将不胜感激。

<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
      }
    }

关联

Answer 1

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

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

// ... 

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

编辑
一行：

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