Vuetify Combobox - 单击图标时打开下拉菜单

Question

我正在尝试创建一个搜索输入字段，其中包含下拉列表中先前搜索的历史记录，例如 Intellij 编辑器中的搜索字段。

我是 Vuetify 的新手，从我目前看到的情况来看，Combobox 是最好的组件。

我希望只有单击下拉图标才能打开下拉菜单。目前，当您单击文本输入字段时，下拉菜单会打开。从文档看起来 prop:menu-props="{openOnClick: false}"可能是我需要的，但它似乎不起作用。

任何人都可以给我正确方向的指示吗？

https://codepen.io/damianhelme/pen/zMXJvb

<v-combobox
   v-model="search"
   :items="searchHistory"
   label="Search"
   :menu-props="{openOnClick: false}"
></v-combobox>

new Vue({
  el: '#app',
  data () {
    return {
      search: '',
      searchHistory: [
        'Apple',
        'Banana',
        'Pear'
      ]
    }
  }
})

谢谢。

Answer 1

编辑：
使用自定义插槽更新笔append以处理图标状态： https:
//codepen.io/anon/pen/KrjzRL

如果您只想在单击图标时打开（和关闭）组合框，请尝试以下技巧：

<v-combobox
    :menu-props="{value: autoselectMenu}"
    @click:append="toggle"
></v-combobox>

将自定义传递value给菜单 - 这指示是否应打开/关闭菜单。
然后仅在单击图标时使用:append-icon-cbprop. 更改该值。

data () {
  return {
    autoselectMenu: false,
// ...
methods: {
  toggle() {
    this.autoselectMenu = !this.autoselectMenu
  }
// ...

因此，对于任何其他情况，当您想要打开或关闭菜单时，只需更改该自定义值即可autoselectMenu。

代码笔