ホーム > Vue > Vuetify のv-file-input Array not String を解決する方法
Vue

Vuetify のv-file-input Array not String を解決する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. Object か Array のどちらを使うか
  3. まとめ
PR

Vuetify の v-file-input を使っていたら、

v-file-inpute Array not String

というエラーが出たとき、

または、

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Array | Object, got String with value "".

と警告が出た時の解決方法について書いています。

結論

v-file-input は Object か、Array を予期しているので初期値を変える必要があります。

Vue3

<script setup>
import { ref, onMounted } from "vue"
const file = ref({}) //ref("")だとエラー

<template>
  <v-file-input v-model="file"></v-file-input>
</template>

Vue2

<template>
  <v-file-input v-model="file"></v-file-input>
</template>

<script>
export default {
  data() {
    return {
      file: [], //file: ""だとエラー
    }
  },
}
</script>

Object か Array のどちらを使うか

複数ファイル multiple 属性を使うなら Array

const file = ref([]) //ref("")だとエラー
<v-file-input v-model="file" multiple></v-file-input>

で良いと思います。

まとめ

以上、v-file-input のエラーについてでした。

誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。