打開菜單時 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/>實現的示例演示。