如何在 vuetify 中多日期选择器模态?

Question

我的vue组件是这样的：

<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>

多个日期时间选取器无法正常工作

如果我在模态中单击"确定"按钮，则存在如下错误：

[Vue 警告]：v-on 处理程序中的错误："TypeError： _vm.$refs.dialog.save 不是一个函数">

如何解决这个问题？

Answer 1

首先，您需要从对话框中返回整个对象，而不仅仅是日期。使用:return-value.sync="item.date"，test中的对象将只有date作为它们的唯一属性。您的日期选择器也有错误的绑定。

<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>