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> 

 // 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