Vue: мульти индикатор выполнения в строке таблицы и загрузка аксио - PullRequest
0 голосов
/ 29 октября 2018

Привет, у меня есть таблица с компонентом строки:

<table class="table m-table m-table--head-separator-brand vcenter" v-cloak>
    <thead>
        <tr>
            <th class="ac">#</th>
            <th width="5%">Loading</th>
        </tr>
    </thead>
    <tbody>
        <tr is="video-row" v-for="(video, index) in videos"></tr>
    </tbody>
</table>

В компоненте video-row у меня есть компонент progress-bar:

<template>
    <tr>
        <th class="text-muted ac" scope="row">
            {{ sequence }}
        </th>
        <td class="ac">
            <progress-bar :percent="video.percent"></progress-bar>
        </td>
    </tr>
</template>

В моем приложении Vue мне нужно загрузить файл и создать новую строку, но мне нужно привязать процент к определенной строке, чтобы, если я загружу вторую одновременно с процентным обновлением, быть другим.

const app = new Vue({
    el: '#app',
    data() {
        return {
            loading:true
        }
    },
    methods:{
        uploadFile () {
            if (! (this.$refs.fileInput.files.length > 0)) {
                return;
            }

            let data = new FormData;
            data.append('file', this.$refs.fileInput.files[0]);
            data.append('playlist', pl_id);
            data.append('channel', ch_id);

            //Pushing a row
            this.videos.push({sequence: 0, duration: 0, processed: 0, name:this.$refs.fileInput.files[0].name})

            axios.post(uploadURL, data, {
                onUploadProgress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
                       // I need to bind this to the progress bar
                       // ??? percentCompleted;
                    }
                }
            })
            .then((response) => {
                    // this.loadVideos();
            }).catch(error => {
                console.error(error)
            })
        },
    },
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...