Vuetify: как иметь несколько компонентов для выбора времени в диалоговом окне?

Question

Я хочу иметь несколько средств выбора времени Vuetify для представления времени начала и окончания события. Работая в одиночку, я могу заставить работать сборщики времени. Но когда два или более таймера ставятся рядом, компоненты ломаются. Из диалогового окна первого выбора невозможно выйти, даже если значение в строке ввода изменилось.

Вот ссылка на мою работу с помощью пера кода: это документация: https://vuetifyjs.com/en/components/time-pickers/

Я только предполагаю, что $ refs.dialog.save () требует вызова метода, но я все еще новичок в Vue / Vuetify, поэтому Я не совсем уверен.

Answer 1

Я предполагаю, что вы имеете дело с проблемой нескольких ссылок. Убедитесь, что значения 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