VCalendarで[Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected Array, got Date
今回はVuetify3でv-calendarを使用しているときに下記のようなエラーが起きたときの対処法についてご紹介いたします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
runtime-core.esm-bundler.js:51 [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Array, got Date at <VCalendar ref="calendar" modelValue= Mon Sep 30 2024 14:42:44 GMT+0900 (日本標準時) onUpdate:modelValue=fn ... > at <VSheet min-height="600" height="600" > at <VCol class="mb-3" > at <VRow no-gutters="" > at <VContainer ma-0="" pa-0="" fluid="" > at <MembersOnly onTokenReady=fn<tokenReady> require-company="" require-auth="" > at <Fixed onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/test" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test', hash: '', query: {…}, name: 'test', path: '/test', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <VContainer ma-0=true pa-0=true fluid=true > at <VMain> at <VApp class="default" > at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=4 > at <NuxtRoot> |
Nuxt.jsのバージョンは3.11.2で、Vuetifyのバージョンは3.7.1です。
VCalendarで[Vue warn]: Invalid prop: type check failed for prop “modelValue". Expected Array, got Date
私はVuetify2からVuetify3へのバージョンアップ時にこのエラーが起こりましたが、結論を言うとv-calendarについてVuetify2ではv-modelにDate型のオブジェクトを渡しておりましたが、Vuetify3からはDate型の配列のオブジェクトを渡さなければならなくなったことが原因となります。
例えば、
|
1 2 3 4 |
<v-calendar ref="calendar" v-model="testDay"> </v-calendar> |
のようにv-calendarを定義していたなら
|
1 2 3 4 |
<script setup> import { ref } from 'vue' const today = ref(new Date()) </script> |
ではなく
|
1 2 3 4 |
<script setup> import { ref } from 'vue' const today = ref([new Date()]) // Dateを配列でラップする </script> |
とする必要があります。
覚えておきましょう。
終わりに
今回はVuetify3でv-calendarを使用しているときに冒頭のようなエラーが起きたときの対処法についてご紹介いたしました。