как использовать setInterval в компоненте vue

Я определяю таймер в каждом my-progress, используемый для обновления значения view, но консоль показывает значение постоянных изменений, а значение view все еще не изменилось, как я могу сделать в таймере, чтобы изменить значение view

Vue.component('my-progress', {
    template: '
            <div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}
                </div>
            </div>
        ',
    data : function(){  

        return {
            pgvalue : '50%',
            intervalid1:'',
        }
    },
    computed:{

        changes : {
            get : function(){
                return this.pgvalue;
            },
            set : function(v){
                this.pgvalue =  v;
            }
        }
    },
    mounted : function(){

        this.todo()     
    },
    beforeDestroy () {

       clearInterval(this.intervalid1)
    },
    methods : {

        todo : function(){          
            this.intervalid1 = setInterval(function(){
                this.changes = ((Math.random() * 100).toFixed(2))+'%';
                console.log (this.changes);
            }, 3000);
        }
    },
})

вот ссылка: jsbin.com/safolom

11
javascript vue-component vuejs2

1 ответов

this не указывает на Vue. Попробуй!--6--> 

todo: function(){           
    this.intervalid1 = setInterval(function(){
        this.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }.bind(this), 3000);
}

или 

todo: function(){  
    const self = this;          
    this.intervalid1 = setInterval(function(){
        self.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }, 3000);
}

или

todo: function(){  
    this.intervalid1 = setInterval(() => {
        this.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }, 3000);
}

посмотреть как получить доступ к правильным this внутри обратного вызова?

18