This content originally appeared on DEV Community and was authored by Salvador García
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.
This content originally appeared on DEV Community and was authored by Salvador García
Salvador García | Sciencx (2021-09-01T23:53:14+00:00) Vue 3 // v-model on custom input type=”file”. Retrieved from https://www.scien.cx/2021/09/01/vue-3-v-model-on-custom-input-typefile/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.