Vuetify: v-date-picker error , when a month is selected , then type changed to date

Question

我正在使用v-date-picker 组件

当我选择一个月然后

将 type props 从 month 更改为 date

使用我在 from 中提供的 select option。

我看到error

这是 vuetify date-picker 组件

<v-date-picker
  full-width
  :locale="currentLocale"
  v-model="form.date"
  :range="range"
  :type="calType"
  :first-day-of-week="1"
>
</v-date-picker>

那么，如何我可以修复这个错误？

Answer 1

我不知道您为什么会收到此错误，但这是您可以更改日期选择器类型的方法

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      currentLocale: 'en',
      selectOptions: [{key: 'date', value: 'Date'}, { key: 'month', value: 'Month'}],
      calType: 'date',
      range: '',
      picker: '',
    }
  },
    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">
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
    <v-col>
      <v-select
       v-model="calType"       
      label="select date type"
      item-text="value"
      item-value="key"
      :items="selectOptions"
      dense
      single-line
      :first-day-of-week="1"
      :range="range"
       v-on:change="selectType($event)"
    >
    </v-select>
    </v-col>
     <v-col>
      <v-date-picker v-model="picker" :type="calType"></v-date-picker>
       </v-col>
    </v-row>
  </v-app>
</div>
</div>

我不知道您为什么会收到此错误，但这是您可以更改日期选择器类型的方法

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      currentLocale: 'en',
      selectOptions: [{key: 'date', value: 'Date'}, { key: 'month', value: 'Month'}],
      calType: 'date',
      range: '',
    }
  },
    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">
<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
    <v-col>
      <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>
      <v-date-picker v-model="picker" :type="calType"></v-date-picker>
       </v-col>
    </v-row>
  </v-app>
</div>
</div>