在Vuetify中，动态时间选择器没有填充时间

Question

我试图通过对象数组循环调用时间选择器动态，但它选择的时间，而不是更新对象中的值，而日期选择器工作得很好。下面是代码片段。任何建议请我如何使时间选择器工作相同的日期选择器?

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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/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>

你可以在这里查看这个代码依赖

Answer 1

尝试删除除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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.5.10/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>