我在我的进度条中定义了一个计时器,用于更新视图的值,但控制台显示常数的值发生了变化,而视图的值仍然没有改变,我应该如何在计时器中改变视图的值。
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
function(){}.bind()
来重新分配this
,第二个示例使用本地的self
变量分配到正确的this
,第三个示例使用 lambda() => {}
语法,它会自动绑定this
。我认为第三个选项是首选。 - Nathan Goings