Vuetifyのv-time-pickerを複数個設置する

はじめに

よくありがちなFrom-Toの入力フォームを作成する際、安易に2個設置すると動かなくて調べてみました。

環境

• windows 10
• Vue.js 2.7.14
• vuetify 2.5.5

はまった点

実装は以下のように行いました。

index.vue

<template>
  <v-menu
    ref="menu"
    v-model="fromDialog"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="startTime"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template #activator="{ on, attrs }">
      <v-text-field
        v-model="startTime"
        label="開始時刻"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-time-picker
      v-if="fromDialog"
      v-model="startTime"
      full-width
      @click:minute="$refs.menu.save(startTime)"
    ></v-time-picker>
  </v-menu>
  <v-menu
    ref="menu"
    v-model="toDialog"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="endTime"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template #activator="{ on, attrs }">
      <v-text-field
        v-model="endTime"
        label="終了時刻"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-time-picker
      v-if="toDialog"
      v-model="endTime"
      full-width
      @click:minute="$refs.menu.save(endTime)"
    ></v-time-picker>
  </v-menu>
</template>
<script>
export default {
  data() {
    return {
      fromDialog: false,
      toDialog: false,
    }
  },
</script>

これで動かすとFrom、ToどちらもTimePicker表示されるのですがfromのtextfieldだけ値が戻せないという事態に。
propsのv-ifやv-modelは変えてあげないとそもそも値を取得できないしなというところは修正していたのですが。

修正後

to側だけ直しました。

index.vue

  <v-menu
    ref="menu2"
    v-model="toDialog"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="endTime"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template #activator="{ on, attrs }">
      <v-text-field
        v-model="endTime"
        label="終了時刻"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        v-bind="attrs"
        v-on="on"
      ></v-text-field>
    </template>
    <v-time-picker
      v-if="toDialog"
      v-model="endTime"
      full-width
      @click:minute="$refs.menu2.save(endTime)"
    ></v-time-picker>
  </v-menu>

menuも分けないと動かない、という内容でした。
そもそもcompornent化して別出しにすれば良い気がしますが、その辺りは次回挑戦してみます。
参考URL：
公式：v-time-picker
Vuetifyのv-time-pickerをループ内に実装する