包含选择选项的文档上传文件

Question

我有一个多个上传的文档上传文件，其中显示文件名和选择选项，用户应该为上传的文件选择文档类型。上传功能工作正常，但有一个问题与选择选项。因为每当我选择一个doc类型的选项时，就会在上传的文件上有一个for循环，所以所有选择的doc类型的值都会改变。

<input
ref="filebtn"
type="file"
multiple
@input="upload"
/>
<div
v-for="file in files"
:key="file.name"
>
<div class="d-flex justify-space-between">
<div>
{{ file.name }}
</div>
</div>
<div v-if="files.length >= 1">
<v-select
v-model="documentTypeModel"
:items="documentType"
></v-select>
</div>
</div>

和脚本

props: {
multiple: {
type: Boolean,
required: false,
},
},
data() {
return {
documentTypeModel: null,
documentType: [
'Item 1',
'Item 2',
'Item 3',
],
}
},
computed: {
filebtn: {
cache: false,
get() {
return this.$refs.filebtn
},
},
}
methods: {
upload() {
const files = this.filebtn.files ?? []
for (let i = 0; i < files.length; i++) {
if (this.multiple) {
// eslint-disable-next-line vue/no-mutating-props
this.files.splice(0, this.files.length)
}
}
},
}

Answer 1

尝试在v-model中使用index:

new Vue({
el: '#demo',
vuetify: new Vuetify(),
data() {
return {
documentTypeModel: [],
documentType: [
'Item 1',
'Item 2',
'Item 3',
],
multiple: true,
files: []
}
},
computed: {
filebtn: {
cache: false,
get() {
return this.$refs.filebtn
},
},
},
methods: {
upload() {
this.files = [...this.filebtn.files] ?? []
for (let i = 0; i < this.files.length; i++) {
if (this.multiple) {
this.files = this.files.splice(0, this.files.length)
}
}
},
}
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo">
<v-app>
<v-main>
<v-container>
<input
ref="filebtn"
type="file"
multiple
@input="upload"
/>
<div
v-for="(file, i) in files"
:key="file.name"
>
<div class="d-flex justify-space-between">
<div>
{{ file.name }}
</div>
</div>
<v-select
v-model="documentTypeModel[i]"
:items="documentType"
></v-select>
</div>
</v-container>
</v-main>
</v-app>
</div>