是否可以从模型值完全控制v菜单状态？

Question

我有以下代码

<template>
  <v-menu>
    <template #activator="{ props }">
      <v-text-field v-bind="props" label="Choose an animal"></v-text-field>
    </template>
    <v-list>
      <v-list-item title="Cat"></v-list-item>
      <v-list-item title="Dog"></v-list-item>
      <!-- etc. -->
    </v-list>
  </v-menu>
</template>

我想知道，是否可以从

v-menu

道具完全控制

model-value

状态？

我为什么需要它？

因为我想禁用以下功能：

• 我不希望它在我点击外部时关闭。
• 我不希望它在单击文本字段时打开/关闭。
• 我想在收到动物列表（从 BE 服务检索）时以编程方式打开它。

我查看了官方文档，但没有发现任何有用的东西。也可能是

v-menu

不是实现我的目标的正确组件。

Answer 1

VMenu API 文档

中列出了执行所有这些操作的道具

• 当我在其外部单击时，我不希望它关闭。

使用

persistent

道具

• 我不希望它在单击文本字段时打开/关闭。

将

open-on-click

属性设置为

false

• 我想在收到动物列表（从 BE 服务检索）时以编程方式打开它。

使用

model-value

并设置为

true

以编程方式打开

<v-menu
  :model-value="openMenu"
  persistent
  :open-on-click="false"
>

const openMenu = ref(false)
function apiCall() {
  api.get(...).then(() => { openMenu = true })
}