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
オススメ本
This article explains how to resolve the error
v-file-input Array not Stringor 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!
