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

Question

我正在寻找一种在单击图标按钮时打开 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>

Answer 1

这里有一个解决方案:创建一个变量(在本例中名为 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/>实现。