Vuetify：如何拥有多个对话内时间选择器组件？

Question

我想要多个 Vuetify 时间选择器来表示事件的开始和结束时间。单独操作，我能够让时间选择器工作。但是，当两个或多个时间选择器并排放置时，组件就会损坏。即使输入行上的值更改，也无法退出第一次选择器对话框。

这是我工作的代码笔链接：'''https://codepen.io/hicario/pen/BaKydjr'''

这是文档：https ://vuetifyjs.com/en/components/time-pickers/

我唯一的猜测是 $refs.dialog.save() 需要一个方法调用，但我仍然是 Vue/Vuetify 的初学者，所以我不太确定。

Answer 1

我假设您正在处理多个 refs 问题。确保 ref 值是唯一的。例如，<component ref="dialog1"> </component><component ref="dialog2"> </component><script>&nbsp;&nbsp;// somewhere in your logic&nbsp;this.$refs.dialog1.save();&nbsp;this.$refs.dialog1.save();</script>&nbsp;

Answer 2

您的模板中有引用错误<v-dialog ref="dialog1" v-model="modal1" :return-value.sync="time" persistent width="290px">添加了参考对话框 1<v-btn text color="primary" @click="$refs.dialog1.save(time)">OK</v-btn>更新了对 dialog1 的引用示例：https ://codepen.io/vishnubhadoriya/pen/MWyYEee