Question

我有一个简单的Combobox组件

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

任何帮助将不胜感激。

<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

Answer 1

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

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

// ... 

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

编辑
一行：

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

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

1 个答案: