I'm currently facing a dilemma that I am struggling to solve effectively.
Within my view, I have a "list" of all purchased images displayed using a v-for loop. Each image includes a progress bar element which should be shown when the user clicks the download button and triggers the downloadContent function.
This is what my HTML structure looks like:
<section class="stripe">
<div class="stripe__item card" v-for="(i, index) in purchasedImages">
<progress-bar :val="i.download_progress"
v-if="i.download_progress > 0 && i.download_progress < 100"></progress-bar>
<div class="card__wrapper">
<img :src="'/'+i.thumb_path" class="card__img">
</div>
<div class="btn-img card__btn card__btn--left" @click="downloadContent(i.id_thumb, 'IMAGE', index)">
</div>
</div>
</section>
And here's my JavaScript code:
import Vue from 'vue'
import orderService from '../api-services/order.service';
import downloadJs from 'downloadjs';
import ProgressBar from 'vue-simple-progress';
export default {
name: "MyLocations",
components: {
ProgressBar: ProgressBar
},
data() {
return {
purchasedImages: {},
purchasedImagesVisible: false,
}
},
methods: {
getUserPurchasedContent() {
orderService.getPurchasedContent()
.then((response) => {
if (response.status === 200) {
let data = response.data;
this.purchasedImages = data.images;
if (this.purchasedImages.length > 0) {
this.purchasedImagesVisible = true;
// Set download progress property
let self = this;
this.purchasedImages.forEach(function (value, key) {
self.purchasedImages[key].download_progress = 0;
});
}
}
})
},
downloadContent(id, type, index) {
let self = this;
orderService.downloadContent(id, type)
.then((response) => {
let download = downloadJs(response.data.link);
download.onprogress = function (e) {
if (e.lengthComputable) {
let percent = e.loaded / e.total * 100;
let percentage = Math.round(percent);
if (type === 'IMAGE') {
// Is this proper way to set one field reactive?
self.purchasedImages[index].download_progress = percentage;
if (percentage === 100) {
self.purchasedImages[index].download_progress = 0;
}
}
}
}
})
},
},
mounted: function () {
this.getUserPurchasedContent();
}
};
The issue at hand is that after initiating the download by clicking the button, the content downloads successfully but the progress bar does not appear. I'm questioning whether setting the element reactively in this manner is correct. What would be the right approach? How can I ensure that
self.purchasedImages[index].download_progressIf you require any additional information, please feel free to ask. Thank you!