Saya mendefinisikan timer di setiap my-progress, digunakan untuk memperbarui nilai tampilan, tetapi konsol menunjukkan nilai perubahan konstan, dan nilai tampilan masih belum berubah, bagaimana saya bisa melakukan di timer untuk mengubah nilai tampilan
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);
}
},
})
berikut ini tautannya: jsbin.com/safolom
ini
tidak menunjuk ke Vue. Coba
todo: function(){
this.intervalid1 = setInterval(function(){
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}.bind(this), 3000);
}
atau
todo: function(){
const self = this;
this.intervalid1 = setInterval(function(){
self.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}, 3000);
}
atau
todo: function(){
this.intervalid1 = setInterval(() => {
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}, 3000);
}
Lihat [Bagaimana cara mengakses ini
yang benar di dalam callback?
periksa contoh ini:
Vue.component('my-progress-bar',{
template:
`<div class="progress">
<div
class="progress-bar"
role="progressbar"
:style="'width: ' + percent+'%;'"
:aria-valuenow="percent"
aria-valuemin="0"
aria-valuemax="100">
{{ percent }}%
</div>
</div>`,
props: { percent: {default: 0} }
});
new Vue({
el: '#app',
data: {p: 50},
created: function() {
var self = this;
setInterval(function() {
if (self.p<100) {
self.p++;
}
}, 100);
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div id='app'>
<my-progress-bar :percent.sync='p'>
</my-progress-bar>
<hr>
<button @click='p=0' class='btn btn-danger bt-lg btn-block'>
Reset Bar Progress
</button>
</div>