ホーム > Vue > How to Solve Vuetify v-file-input Array not String Issue
Vue

How to Solve Vuetify v-file-input Array not String Issue

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. エラーメッセージ
  2. Conclusion
  3. Object or Array: Which Should You Use?
  4. Summary

A guide on how to resolve the Vuetify v-file-input Array not String issue.

PR

エラーメッセージ

v-file-input Array not String

or the warning

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

when using Vuetify's v-file-input.

Conclusion

The v-file-input expects either an Object or Array, so you need to change the initial value.

Vue3

<script setup>
import { ref, onMounted } from "vue"
const file = ref({}) // Using ref("") will cause an error

<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: "" will cause an error
    }
  },
}
</script>

Object or Array: Which Should You Use?

Use Array if You're Using the Multiple Attribute for Multiple Files

const file = ref([]) // Using ref("") will cause an error
<v-file-input v-model="file" multiple></v-file-input>

This should work fine.

Summary

That's all about the v-file-input error.

I hope this helps someone.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!