My goal is to dynamically call the time picker by iterating through an array of objects. However, I'm encountering an issue where the time picker is selecting the time but not updating the value in the objects, unlike the date picker which works perfectly fine. Below is a snippet of the code. Any suggestions on how I can get the time picker to function like the date picker?
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
dateMenu: [],
timeMenu: [],
dateArr: [{
id: 1,
date: null
},
{
id: 2,
date: null
}
],
timeArr: [{
id: 1,
time: null
},
{
id: 2,
time: null
}
]
};
}
});<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6016150520524e18">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2c2f3f2e333c231a68746f746b6a">[email protected]</a>/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25535040514c435c65170b100b1415">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-row>
<template v-for="item in timeArr">
<v-col cols="12" md="3">
<v-menu ref="timeMenu[item.id]" v-model="timeMenu[item.id]" :close-on-content-click="false" :return-value.sync="item.time" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field outlined flat hide-details="auto" solo class="solo-cust" v-model="item.time" label="From" readonly v-bind="attrs" v-on="on"></v-text-field>
</template>
<v-time-picker no-title ampm-in-title format="24hr" v-model="item.time" full-width @click:minute="$refs.timeMenu[item.id].save(item.time)"></v-time-picker>
</v-menu>
</v-col>
</template>
</v-row>
{{timeArr}}
<v-row>
<template v-for="item in dateArr">
<v-col cols="12" md="3">
<v-menu v-model="dateMenu[item.id]" :close-on-content-click="false" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field autocomplete="off" label="Date" v-model="item.date" solo outlined v-on="on" flat hide-details="auto"></v-text-field>
</template>
<v-date-picker v-model="item.date" no-title @input="dateMenu[item.id] = false;"></v-date-picker>
</v-menu>
</v-col>
</template>
</v-row>
{{dateArr}}
</v-app>
</div>To view this codepen example please visit Here