Привет, у меня есть таблица с компонентом строки:
<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)
})
},
},
});