单击按钮时打开v-select选项

问题描述

我正在寻找一种在单击图标按钮时打开vuetify v-select组件的方法。 v-select在关闭时不可见，仅在通过单击按钮打开时可见。 就像让按钮切换v-select的状态一样

其目的是过滤要在数据表上显示的列，而我希望默认情况下将其隐藏的原因是因为我已经在表工具栏上拥有一个v-select组件来选择要显示的数据。

我只有这是我的相关代码，我不知道如何从这里继续

 <v-btn small icon>
      <v-icon>
        mdi-pencil
          <v-select :items="headers"></v-select>
      </v-icon>
 </v-btn>

解决方法

这是一个解决方案：创建一个变量（在此示例中名为toggleSelect ），该变量将控制<v-select/>及其<v-menu/>的可见性（下拉选项）。 <v-select/>具有menu-props，我们可以使用它来控制菜单的可见性。对于选择字段，我们可以简单地使用v-if将其隐藏。

<v-btn 
  ...
  @click="toggleSelect = !toggleSelect"
>
  <v-icon>mdi-pencil</v-icon>
</v-btn>
<v-select
  :items="headers"
  v-if="toggleSelect"
  :menu-props="{value: toggleSelect}"
/>

data: () => ({
  headers: [...],toggleSelect: false,// let's not show the <v-select/> at first load.
})

这是demo和<v-data-table/>实现的示例。