Hi everyone. Let's get to the point. A few days ago I needed to use v-model in a component of my own that I needed to capture a file in an input of type file. After trying a bit, the solution was the following:
<template>
<input type="file" @change="onChangeFile" name="file" />
</template>
<script>
methods: {
onChangeFile(event) {
this.$emit('update:modelValue', event.target.files[0])
}
</script>
//Your component made in Vue 3
<MyInputFileComponent v-model="file" />
This is the easiest way to use it. If you need to capture many files you just have to go through the list of files found in the e.target.files
I share this information in case there is anyone out there looking for a solution for this scenario. Happy dev.
Top comments (2)
Why did you "file" the v-model name?
It is just an example name. It could be: "userFile", "userPhoto", "salesRecord", etc...