Загрузка файла Vue без удаления файлов - PullRequest
Новая
       31

Загрузка файла Vue без удаления файлов

0 голосов
/ 20 февраля 2019

Привет, у всех здесь есть кто-нибудь, кто использует компонент загрузки Vue https://lian -yue.github.io / vue-upload-component / # / en / documents

Проблема связана с удалениемфайл работает только при первом удалении, 2-ом, 3-м и т. д. при удалении файла нет.Я следовал инструкциям по документации здесь https://lian -yue.github.io / vue-upload-component / # / en / documents # instance-method-remove .FYI это происходит, когда массив файлов непустой массив по умолчанию.Ниже приведены мои коды, любая помощь будет высоко ценится.Спасибо

Шаблон 

<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)
        }
}
...