Thank you for your continued support. This article contains advertisements, including affiliate links, that help fund our operations. As an Amazon Associate, Laratech earns from qualifying purchases.
[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
A software engineer with 6 years of experience, mainly in server-side development. I independently build and operate a production startup service, working full-stack across Laravel, JavaScript, and AWS. Since 2019, I've been sharing the real-world problems and solutions I encounter.
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!
