Why is the width of my div not changing when I try to bind it to a data attribute that ranges from 0 to 100?
<div class="bar" :style="{ width: percentage + '%' }"></div>
<script>
export default {
name: 'app',
data() {
return {
percentage: 0,
total: 43,
downloaded: 0
}
},
methods: {
loadData() {
var _this = this;
this.toggleLoading();
var interval = setInterval(function(){
if (_this.downloaded == _this.total) clearInterval(interval);
_this.downloaded++;
_this.percentage = Math.floor(_this.downloaded / _this.total * 100) + ' %';
},
100);
},
}