I'm trying to call the time picker dynamic by looping through the array of objects but it's selecting the time and not updating the value in objects whereas the date picker works perfectly fine. Here is the snippet of the code. Any suggestions please how can I make the time picker work the same as 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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>You can check this codepen Here
CodePudding user response：
Try to remove all except v-model:
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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 v-model="timeMenu[item.id]" :close-on-content-click="false" 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 ></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>