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

Question

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

模板

<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 函数，如下所示：

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