我使用 v-menu 创建多个弹出菜单;我的表中的每一行都有一个。我需要一种在单击提交时关闭菜单的方法。我无法使用 v-model="menu" 并使菜单为 false 或 true 来隐藏或显示菜单,因为当我将其设置为 true 时,每个菜单都会打开!有谁知道在不使用 v-model 的情况下关闭菜单的另一种方法吗?我找到了一种使用激活器插槽打开它的方法。也许有一个激活器插槽也可以关闭该组件?
<template v-slot:item.hours="{ item }">
<v-menu
:nudge-width="200"
:close-on-content-click="false"
offset-x
>
<template v-slot:activator="{ on }">
<v-chip
color="blue"
dark
v-on="on"
>
{{ parseFloat(item.hours).toFixed(1) }}
</v-chip>
</template>
<v-form @submit.prevent="handleSubmitMenu(item)">
<v-card class="px-5">
<v-text-field
label="Edit Hours"
:value="item.hours"
@input="updateHours"
></v-text-field>
<v-card-actions>
<SubmitButton />
</v-card-actions>
</v-card>
</v-form>
</v-menu>
</template>
handleSubmitMenu(timeEntry) {
const hours = this.hours
this.menu = false
},
Run Code Online (Sandbox Code Playgroud)