大家好,有人在这里使用Vue上传组件https://lian-yue.github.io/vue-upload-component/#/en/documents
问题是删除文件仅适用于第一次删除,第二次,第三次,等等,删除文件无效。我在这里https://lian-yue.github.io/vue-upload-component/#/en/documents#instance-methods-remove中遵循了文档步骤。仅供参考,默认情况下,文件数组不是空数组时会发生这种情况。下面是我的代码,任何帮助将不胜感激。谢谢
模板
<template>
<div class="custom-file-upload">
<h3>Attachments</h3>
<v-card elevation-0 :class="'file-upload text-xs-center elevation-0'">
<p class="file-error red">{{ fileError }}</p>
<p class="text-xs-center text-upload">
<v-icon primary :class="'d-block'">cloud_upload</v-icon>
<span>Drag and drop file to upload</span>
<span>Maximum upload size 20MB</span>
<v-btn color="success" :class="'d-block'">
browse from computer <v-icon right dark>file_copy</v-icon>
</v-btn>
</p>
<vue-file-upload
v-model="taskFiles"
ref="fileUpload"
:size="fileSizeLimit"
:multiple="true"
:drop="true"
:drop-directory="true"
@input-filter="filterFile"
@input-file="addFile">
</vue-file-upload>
<v-list one-line v-if="taskFiles.length">
<template v-for="(file, index) in taskFiles">
<v-divider></v-divider>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>
<span class="text-truncate">{{file.name}}</span>
<v-icon color="red" right @click.stop.prevent="remove(file)">delete_forever</v-icon>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</div>
</template>
数据属性
data() {
return {
taskFiles: [{"name":"file_1.jpg"}, {"name":"file_2.jpg"}, {"name":"file_3.jpg"}],
}
}
方法
methods: {
remove( fileName ) {
console.log(this.taskFiles)
this.$refs.fileUpload.remove(fileName)
}
}