How can I multiple datepicker modal in vuetify? - vue.js

Question

My vue component like this :
<template>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-dialog
v-for="(item, i) in test" :key="i"
ref="dialog"
v-model="modal"
:return-value.sync="item.date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="item.date"
label="Picker in dialog"
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(item.date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
test: [
{ id: 1, date: new Date().toISOString().substr(0, 10) },
{ id: 2, date: new Date().toISOString().substr(0, 10) },
],
modal: false,
}),
}
</script>
multiple datetimepicker doesn't work properly
if i click ok button in the modal, there exist error like this :
[Vue warn]: Error in v-on handler: "TypeError: _vm.$refs.dialog.save is not a function"
How can I solve this problem?

Answer 1

First off, you need to return the whole object from the dialog, not just the date. With :return-value.sync="item.date", the objects in test will have only date as their only property. Your date picker also has a wrong binding.
<v-dialog
v-for="(item, i) in test" :key="i"
ref="dialog"
v-model="modal"
:return-value.sync="item"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="item.date"
label="Picker in dialog"
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="item.date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">OK</v-btn>
</v-date-picker>
</v-dialog>