Vue.js 在 v-for 循环中动态添加文件名

Question

我有一个组件可以动态地将输入添加到我的应用程序中。 一个输入是文本输入，另一个是文件输入。 在文本输入的情况下，一切正常，我通过 v-model 获取值。 在文件输入的情况下，不能使用 v-model，而是使用 v-on: change。 如何动态地将文件名添加到列表 object 中？

模板

<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>

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>

我正在使用 Vue 3。

提前致谢。

Answer 1

您也可以使用索引进行迭代，然后将索引传递给upload function，如下所示：

 <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>

Answer 2

可以绑定数组索引，不需要upload方法

 new Vue({ el: '#app', data() { return { title: "Vue app", lists:[{text: '', filename: '',}] }; }, methods:{ addItem() { this.lists.push({ text: '', filename: '' }) } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"><h2>{{title}}</h2> <div v-for="(list,i) in lists"> <input type="text" v-model="lists[i].text" > <input type="file" v-model="lists[i].filename"> </div> <button @click="addItem">Add Item</button> <pre>{{lists}}</pre> </div>

Answer 3

你可以这样做：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'>

 new Vue({ el: '#app', data() { return { title: "Vue app", lists:[{text: '', filename: '',}] }; }, methods:{ addItem() { this.lists.push({ text: '', filename: '' }) }, getFile(filePath) { return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0]; }, getoutput(e, index) { let fileName = this.getFile(e.target.value); let fileExtention = e.target.value.split('.')[1]; this.lists[index].filename = `${fileName}.${fileExtention}`; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"><h2>{{title}}</h2> <div v-for="(list,i) in lists"> <input type="text" v-model="lists[i].text" > <input type="file" @change="getoutput($event, i)"> </div> <button @click="addItem">Add Item</button> <pre>{{lists}}</pre> </div>