打开菜单时 Vuetify [v-select] 触发

Question

我需要帮助来检测 select 中的菜单被打开并向用户显示的时刻。

有什么方法或手表可以用来触发菜单显示的那一刻吗？

这是一个带有 v-select 的简单代码笔。

codepen.io/xmorelll/pen/bGMppWO?editors=101

谢谢！

Answer 1

您是否尝试@click事件，单击/打开菜单时会触发它

Answer 2

我发现这个解决方案从 vuetify 扩展了 VSelect 组件：

import { VSelect } from 'vuetify/lib'

export default {
    extends: VSelect,
    watch: {
        isMenuActive(val) {
            this.$emit('openMenu', val);
        }
    }
}

使用这个组件，当菜单改变他的状态时，VSelect 会发出

Answer 3

创建一个变量（在此示例中名为toggleSelect ） ，它将控制<v-select/>及其<v-menu/> （下拉选项）的可见性。 <v-select/>有menu-props可以用来控制菜单的可见性。 对于 select 字段，我们可以简单地使用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.
})

这是一个带有<v-data-table/>实现的示例演示。