javascript - Vue.js add filename dynamically in a v-for loop

Question

I have a component that dynamically adds inputs to my application. One input is a text input and another is a file input. In the case of text input everything works, I take the value via v-model. In the case of file input it is not possible to use v-model, instead v-on: change is used. How do I add the filename to the lists object dynamically?

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>

I'm using Vue 3.

Thanks in advance.

Answer 1

You can iterate with the index as well, then pass the index to the upload function, like this:

<script>

export default {

    data() {
        return {
        lists:[{text: '', filename: '',}]
        }
    },
    
    methods: {
        addItem() {
            this.lists.push({ text: '', filename: '' })
        },

        upload(event, index) {
            this.lists[index].filename = event.target.files[0].name
        },
    }
}

</script>

<template lang="html">

    <div v-for="(list, index) in lists">

        <input type="text" v-model="list.text" >
        
        <input type="file" @change="upload($event, index)">

    </div>
    
    <button @click="addItem">Add Item</button>

</template>