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

Question

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

这是我的作品的代码笔link：'''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> 
 // somewhere in your logic
 this.$refs.dialog1.save();
 this.$refs.dialog1.save();
</script>

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

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

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

javascript

vue.js

datetime

vuetify.js

datetimepicker