how to use setInterval in vue component

Question

I define the timer in each my-progress, used to update the value of view, but the console shows the value of the constant changes, and the value of view is still not changed, how can I do in the timer to change the value of 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);         }     }, }) 

here is the link: jsbin.com/safolom

Answer 1

this is not pointing to the Vue. Try

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

or

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

or

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

See How to access the correct this inside a callback?