Vuetify: How to have multiple in-dialog time picker components?

1
votes

I want to have multiple Vuetify time pickers to represent start and end times of an event. Operating alone, I'm able to get the time pickers to work. But when two or more time pickers are put next to one another, the components break. The first time picker dialog cannot be exited even though the value on the input line changes.

Here is a code pen link to my work: '''https://codepen.io/hicario/pen/BaKydjr'''

Here is the documentation: https://vuetifyjs.com/en/components/time-pickers/

My only guess is that the $refs.dialog.save() requires a method call, but I'm still a beginner at Vue/Vuetify so I'm not too sure.

2
javascriptvue.jsdatetimevuetify.jsdatetimepicker

2 Answers

1
votes

I'm assuming you're dealing with multiple refs issue. Make sure that ref values are unique. for example,

<component ref="dialog1"> </component>
<component ref="dialog2"> </component>
<script> 
 // somewhere in your logic
 this.$refs.dialog1.save();
 this.$refs.dialog1.save();
</script>
0
votes

You have reference error in your template

<v-dialog ref="dialog1" v-model="modal1" :return-value.sync="time" persistent width="290px">

Added reference dialog1

<v-btn text color="primary" @click="$refs.dialog1.save(time)">OK</v-btn>

Updated reference to dialog1

Example : https://codepen.io/vishnubhadoriya/pen/MWyYEee