I'm currently facing an issue with dynamically adding inputs to my Vue 3 application. Specifically, I have a component that adds both text and file inputs dynamically. While the text input works flawlessly using v-model, the file input requires me to use v-on:change instead. My question is, how can I dynamically add the filename to the lists object when dealing with file inputs?
Template
<template lang="html">
<div v-for="list in lists">
<input type="text" v-model="list.text" >
<input type="file" @change="upload">
</div>
<button @click="addItem">Add Item</button>
</template>
Script
<script>
export default {
data() {
return {
lists:[{text: '', filename: '',}]
}
},
methods: {
addItem() {
this.lists.push({ text: '', filename: '' })
},
upload(event) {
this.lists.filename = event.target.files[0].name
},
}
}
</script>
Any suggestions or insights on resolving this issue would be greatly appreciated!