VCalendarで[Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected Array, got Date

2024年9月30日

今回はVuetify3でv-calendarを使用しているときに下記のようなエラーが起きたときの対処法についてご紹介いたします。

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>

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型の配列のオブジェクトを渡さなければならなくなったことが原因となります。

例えば、

<v-calendar
  ref="calendar"
  v-model="testDay">
</v-calendar>

<v-calendar

ref="calendar"

v-model="testDay">

</v-calendar>

のようにv-calendarを定義していたなら

<script setup>
import { ref } from 'vue'
const today = ref(new Date())
</script>

import { ref } from 'vue'

const today = ref(new Date())

</script>

ではなく

<script setup>
import { ref } from 'vue'
const today = ref([new Date()]) // Dateを配列でラップする
</script>

import { ref } from 'vue'

const today = ref([new Date()]) // Dateを配列でラップする

</script>

とする必要があります。

覚えておきましょう。

終わりに

今回はVuetify3でv-calendarを使用しているときに冒頭のようなエラーが起きたときの対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

ITパスポート、基本情報技術者、応用情報技術者などIPAが提供する国家資格の過去問を学べるモバイルアプリをリリースしました。
詳しくは下記のプレスリリースをご覧ください。
https://prtimes.jp/main/html/rd/p/000000008.000073303.html

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

Veutify

Posted by ちこ

VSelectに対して「[Vue warn]: Invalid prop: type check failed for prop "title". Expected String | Number」

Nuxt.jsでFeature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

コメント一覧

まだ、コメントがありません