v-bind:class data bind doesn't set value in method

Question

I'm trying to bind a width to a div where the width is equal to a data attribute. The value of the data attribute is changing from 0 to 100, but the width of div isn't changing. Can someone tell me why?

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

Answer 1

您提到的百分比为0可能就是多数民众赞成为什么不改变宽度的原因

Answer 2

You are concatening '%' twice:

:style="{ width: percentage + '%' }"

and

_this.percentage = Math.floor(_this.downloaded / _this.total * 100) + ' %'

Do it only in one place and it will work fine.

Simplified JSFiddle concatening '%' in style only