Answer a question

I can't seem to spot what I missed here.

I have 2 inputs time, 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>

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>

data()

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
        }
    },

Every time, I clicked out ... my endTime reset back to the default value.

Note: I started to notice that only one picker will work... doesn't matter start/end time. only one seems to work when I select the minute. Whichever one I do last, It kept resetting to the default value. I think the conflict is happening somewhere...

Answers

Your problem is the same ref names of two menus <v-menu ref="menu". Just rename ref <v-menu ref="menu2" v-model="endTimeMenu" ... /> from menu to menu2 and also change @click:minute="$refs.menu2.save(form.values.startTime)". Working correct codesandbox