vue.js - vuetify :v-date-picker 更改日历类型时出错
问题描述
查看错误
1.切换type
到month
2.选择月份范围
3.更改type
为date
然后你会看到这个错误:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
modal : false ,
currentLocale : 'en',
selectOptions : [
{ key: 'date', value: 'Date' },
{ key: 'month', value: 'Month' }
],
calType : 'date',
range : true,
date : []
}
},
methods: {
selectType($event) {
this.calType = $event;
},
},
})
<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@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<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>
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-col cols="12">
<v-select
v-model="calType"
label="select date type"
item-text="value"
item-value="key"
:items="selectOptions"
dense
single-line
v-on:change="selectType($event)"
>
</v-select>
</v-col>
<v-col cols="12">
<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"
:locale="currentLocale"
:range="range"
:type="calType"
:first-day-of-week="1"
scrollable
>
<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>
那么,我该如何解决这个问题?
这也是另一张照片
解决方案
推荐阅读
- python - 调用 __missing__ 后,作为字典值的列表变为无
- html - 为什么此代码在单击时无法提供平滑的 CSS3 滚动?
- database - 在这种情况下,我应该使用单个数据库还是每个用户使用一个数据库?
- javascript - ExtJS,如何防止窗口被最大化
- windows - 如何获取 Windows 10 版本字符串的最后一个值 (Rev)
- python - 删除列表中彼此距离小于 N 的元素
- hibernate - 如何使用 JPA CriteriaQuery 自左加入根
- react-native - React Navigation V5 + Redux Saga:我如何从 Saga 中导航?
- for-loop - 从路径中删除 fllename 以复制 zsh 中的文件列表
- rstudio - 使用 Cmd + c 时复制快捷方式在 RStudio 中不起作用