Vuetify.js - <v-menu> 内的 <v-text-field> 不能在 <v-menu> 消失的情况下获得焦点答案

【问题标题】：Vuetify.js - <v-text-field> inside <v-menu> can't be focused without <v-menu> disappearingVuetify.js - <v-menu> 内的 <v-text-field> 不能在 <v-menu> 消失的情况下获得焦点
【发布时间】：2023-03-24 20:23:02
【问题描述】：

考虑以下布局：

<v-menu>
    <span slot="activator">Open dropdown</span>
    <v-list>
        <v-list-tile @click=""><v-list-tile-title>Menu item 1</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 2</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 3</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-text-field label="Search" append-icon="search"></v-text-field></v-list-tile>
    </v-list>
</v-menu>

这会呈现一个“按钮”来打开一个下拉菜单，其中包含 3 个菜单项和一个用于搜索的文本输入字段作为第四项。问题是关注文本字段会自动折叠菜单。感谢所有帮助，在此先感谢。

【问题讨论】：

我猜在最后一个 v-list-tile 上将 @click 更改为 @click.stop
抱歉，我的错误 - @click 甚至不应该出现在最后一个 v-list-tile 项目中，复制错误。
我认为你仍然可以使用它。 @click.stop=""
尽管如此，@click.stop 解决了这个问题并且是正确的答案，谢谢@Traxo！

标签： vue.js vuetify.js

【解决方案1】：

只需添加:close-on-click="false" 或:close-on-content-click="false"

<v-menu  :close-on-content-click="false"  :close-on-click="false">
    <span slot="activator">Open dropdown</span>
    <v-list>
        <v-list-tile @click=""><v-list-tile-title>Menu item 1</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 2</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 3</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-text-field label="Search" append-icon="search"></v-text-field></v-list-tile>
    </v-list>
</v-menu>

【讨论】：

谢谢！一年多来，我没有使用我需要的东西，但无论如何。另外，这是在不到一年半前最近添加到 Vuetify 中的吗？