Vuetify：使用开始时间 + 结束时间输入答案

【问题标题】：Vuetify : Working with Start Time + End Time InputsVuetify：使用开始时间 + 结束时间输入
【发布时间】：2021-12-23 14:21:17
【问题描述】：

我似乎无法发现我在这里错过了什么。

我有 2 个输入时间，startTime 和 endTime

开始时间

<v-col cols="12" sm="6" md="2">
    <v-menu
        ref="menu"
        v-model="startTimeMenu"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="form.values.startTime"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="290px"
    >
        <template v-slot:activator="{ on, attrs }">
            <v-text-field
                dense
                v-model="form.values.startTime"
                label="Start Time"
                append-icon="mdi-clock-time-four-outline"
                readonly
                v-bind="attrs"
                v-on="on"
                outlined
            ></v-text-field>
        </template>
        <v-time-picker
            v-if="startTimeMenu"
            v-model="form.values.startTime"
            full-width
            @click:minute="$refs.menu.save(form.values.startTime)"
        ></v-time-picker>
    </v-menu>
</v-col>

结束时间

<v-col cols="12" sm="6" md="2">
    <v-menu
        ref="menu"
        v-model="startTimeMenu"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="form.values.startTime"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="290px"
    >
        <template v-slot:activator="{ on, attrs }">
            <v-text-field
                dense
                v-model="form.values.startTime"
                label="Start Time"
                append-icon="mdi-clock-time-four-outline"
                readonly
                v-bind="attrs"
                v-on="on"
                outlined
            ></v-text-field>
        </template>
        <v-time-picker
            v-if="startTimeMenu"
            v-model="form.values.startTime"
            full-width
            @click:minute="$refs.menu.save(form.values.startTime)"
        ></v-time-picker>
    </v-menu>
</v-col>

数据()

data() {
        return {
            form: {
                errors: {},
                values: {
                    name: null,
                    type: 'Marketing',
                    timezone: 'America/New_York',
                    startDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
                    endDate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().substr(0, 10),
                    startTime: moment().format('HH:mm'),
                    endTime: '24:00'
                }
            },
            e1: 1,
            valid: false,
            valid2: false,
            types: ['Product', 'Marketing'],
            timezones: moment.tz.names(),
            startDateMenu: false,
            endDateMenu: false,
            startTimeMenu: false,
            endTimeMenu: false
        }
    },

每次，我都会点击...我的 endTime 重置为默认值。

注意：我开始注意到只有一个选择器可以工作......开始/结束时间无关紧要。当我选择分钟时，似乎只有一个有效。无论我最后做哪一个，它都会一直重置为默认值。我认为冲突发生在某个地方......

【问题讨论】：

你能在codesanbox中复制问题吗？
问题中的startTime 和endTime 标记相同（复制粘贴错误？）。你能分享一个重现问题的链接吗？

标签： javascript vue.js input vue-component vuetify.js

【解决方案1】：

您的问题是两个菜单<v-menu ref="menu" 的引用名称相同。只需将 ref <v-menu ref="menu2" v-model="endTimeMenu" ... /> 从 menu 重命名为 menu2 并更改@click:minute="$refs.menu2.save(form.values.startTime)"。工作正确codesandbox

【讨论】：

这可能只是问题中的复制粘贴错误。
@tony19，我不这么认为，是的，他打错了，但问题的意思很清楚。在我的演示中，您可以检查它。只需将 ref menu2 重命名为 menu，您就会看到 @code8888 问题。

【解决方案2】：

不知道是不是报错，但是 startTime 和 endTime 的代码是一样的，现在假设你很好地分享了代码，我做了以下：我将所有代码复制到代码沙箱中，它在选择时间时给了我一个错误，但如果我让 startTime 代码完美运行，那么错误可能是您使用 startTime 中的数据作为 endTime。

解决方案是为 startTime 和 endTime 使用不同的变量。

startTime 有效

<v-col cols="12" sm="6" md="2">
    <v-menu
        ref="menu"
        v-model="startTimeMenu"
        :close-on-content-click="false"
        :nudge-right="40"
        :return-value.sync="form.values.startTime"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="290px"
    >
        <template v-slot:activator="{ on, attrs }">
            <v-text-field
                dense
                v-model="form.values.startTime"
                label="Start Time"
                append-icon="mdi-clock-time-four-outline"
                readonly
                v-bind="attrs"
                v-on="on"
                outlined
            ></v-text-field>
        </template>
        <v-time-picker
            v-if="startTimeMenu"
            v-model="form.values.startTime"
            full-width
            @click:minute="$refs.menu.save(form.values.startTime)"
        ></v-time-picker>
    </v-menu>
</v-col>

您可以在此处访问该项目。 https://codesandbox.io/s/vuetify-menu-problem-r2xvl?file=/src/App.vue

如果您想查看错误，请在 startTime 代码下方添加 endTime 代码

【讨论】：