更改为范围道具时，Vuetify v-date-picker不会出现

Question

我在项目中使用这段代码，这是一个文本字段，当我点击它时，它会弹出一个显示日历的对话框。

这很好，但是当我在v-date-picker上插入范围道具时，日历不再显示，只显示对话框背景。它在这个代码笔上运行良好，你可以在下面看到：

查看画笔Simão的Vuetify示例笔(@izzyDL(在CodePen上。

<div id="app">
<v-app id="inspire">
<v-row>
<v-col
cols="11"
sm="5"
>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
scrollable
range
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="modal = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.dialog.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>

有什么想法可能导致这个问题吗？

Answer 1

下面的代码片段正在使用您的代码，选择器显示得很好。你的问题我遗漏了什么吗？

我应该指出的一点是，当使用range道具日期选择器时，它的模型应该是长度为2或为空的数组。在您的代码中，date道具是string。不过，它不会影响日历渲染。

屏幕截图

new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: ['2019-09-10', '2019-09-20'],
menu: false,
modal: false,
}),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="11" sm="5">
<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable range>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal = false">
Cancel
</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date)">
OK
</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>