Vue：表格行中的多进度条和axio上传

Question

嗨，我有一个带有行组件的表：

<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)
            })
        },
    },
});