Vuetify 2.3.4 日期选择器关闭内容点击似乎是 "malfunctioning"

Question

我对 Vuetify 和 Vue.js 还很陌生。当我 select 约会时，我不确定我的 2 个日期选择器关闭时如何或为什么无法正常工作。此外，我从在线 documentation/api 处获取了这段代码：https://vuetifyjs.com/en/components/date-pickers/

它是在我 select 一个值之后关闭的日历。

根据文档，close-on-content-click 如果您希望日历在用户 select 值后关闭，则应设置为“true” .

在线示例有 close-on-content-click="false"，但日历在 selection 之后关闭？为什么以及如何？

在我正在开发的页面上，我有两个日期选择器。它们都设置为 close-on-content-click="false"。其中一个在 selection 后关闭，一个没有。

为什么在线示例在不应该关闭的时候关闭了？为什么我的一半代码表现不正常？我很迷惑。我错过了什么吗？

相关代码如下。

<v-row>
    <v-col md6>
        <v-menu
                v-model="WhenStartedDate"
                :close-on-content-click="false"
                :nudge-right="40"
                transition="scale-transition"
                offset-y
                min-width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="newEvent.whenStartedDate"
                        label="Event Start Date"
                        prepend-icon="event"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                ></v-text-field>
            </template>
            <v-date-picker v-model="newEvent.whenStartedDate" @input="WhenStarteDate = false"></v-date-picker>
        </v-menu>
    </v-col>
    <v-col md6>
    </v-col>
</v-row>
<v-row>
    <v-col md6>
        <v-menu
                v-model="WhenEndedDate"
                :close-on-content-click="false"
                :nudge-right="40"
                transition="scale-transition"
                offset-y
                min-width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="newEvent.whenEndedDate"
                        label="Event End Date"
                        prepend-icon="event"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                ></v-text-field>
            </template>
            <v-date-picker v-model="newEvent.whenEndedDate" @input="WhenEndedDate = false"></v-date-picker>
        </v-menu>
    </v-col>
    <v-col md6>
    </v-col>
</v-row>

Answer 1

您的一个菜单运行正常，因为您在其中引用的其中一个变量中有拼写错误。另一个行为不正常，因为它具有正确的变量名称，并且它完全按照您的指示进行操作，即关闭菜单。

您传递给 v-model 的值充当 open/closed 状态，并且可能会覆盖 close-on-content-click。每个菜单都附有两个 v-model：一个名为 WhenStartedDate，另一个名为 WhenEndedDate。您在两个日期选择器组件的每个 @input 事件中将它们设置为 false，这样做将强行关闭两个菜单......但不完全是，因为其中一个有错字他们：@input="WhenStarteDate = false" 少了一个“d”。这就是为什么那个没有关闭，而另一个

要在选择日期后保持两个菜单都打开，只需从两个 v-date-picker 中删除两个 @input="..." 处理程序即可。

codepen 中的示例：https://codepen.io/mlillie87/pen/ZEQRamL?editors=1010

Vuetify 2.3.4 日期选择器关闭内容点击似乎是 "malfunctioning"

Vuetify 2.3.4 date picker close-on-content click seems to be "malfunctioning"

datepicker

vue.js

vuetify.js