Je définis le minuteur dans chaque my-progress, utilisé pour mettre à jour la valeur de la vue, mais la console affiche la valeur des modifications constantes, et la valeur de la vue n'est toujours pas modifiée. Comment puis-je le modifier dans le minuteur? de vue
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);
}
},
})
voici le lien: jsbin.com/safolom
this
ne pointe pas vers la Vue. Essayer
todo: function(){
this.intervalid1 = setInterval(function(){
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}.bind(this), 3000);
}
ou
todo: function(){
const self = this;
this.intervalid1 = setInterval(function(){
self.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}, 3000);
}
ou
todo: function(){
this.intervalid1 = setInterval(() => {
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}, 3000);
}
vérifiez cet exemple:
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>