Having a bit of an issue here. I'm working on an app where users can upload images using axios. In order to enhance the user experience, I'm trying to implement a loading bar.
Here's what it looks like:
<div class="loadingbox" :style="{width: loadbar + '%'}"></div>
My data setup is as follows:
data() {
return {
loadbar: 0
};
},
Axios provides the onUploadProgress function, so my plan was to use it to update the width of the div:
onUploadProgress(e) {
let step = 100 / e.total;
this.loadbar = e.loaded * step;
console.log(this.loadbar);
},
When I check my console output, it shows:
0
20.334
89.32
100
However, the width of the div doesn't seem to change at all. Strangely, if I manually set loadbar: 50, then I see 50% of the progress bar.
Any insights into why Vue.js isn't registering these changes?
Update:
I tried simulating it in the created() lifecycle hook:
created() {
let loaded = 0;
setInterval(() => {
loaded += 1000;
let total = 30000;
let step = 100 / total;
this.loadbar = loaded * step;
}, 1000);
}
Surprisingly, everything works perfectly fine in this scenario.