I do tryin' make a progress bar with VueJS but when this count equal 100 interval still going process. How can i stop interval when data equal 100 percent?
I used the console.log() command to check if the code is working, but it returns a wrong response.
Best Regards,
That's my code:
HTML:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click="startProgress">Start Progress</button>
<br><br>
<div class="progress" :style="{width : progressWidth + 'px'}"></div>
</div>
CSS:
.progress{
background-color: pink;
transition: all 310ms ease;
width: 0px;
height: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
VueJS:
new Vue({
el: '#app',
data: {
progressWidth : 0
},
methods: {
startProgress : function(){
var vm = this;
setInterval(function(){
vm.progressWidth+=10;
}, 150);
vm.progressWidth= 20 ? console.log('20') : console.log('--');
}
},
});
if you want you can check live on jsFidde: https://jsfiddle.net/6j05p8Lb/46/
As mentioned by @Lawrence Cherone, use clearInterval function:
new Vue({
el: '#app',
data: {
progressWidth: 0
},
methods: {
startProgress: function() {
const that = this;
const timer = setInterval( function() {
if (that.progressWidth >= 100) {
clearInterval(timer);
} else {
that.progressWidth += 10;
}
}, 150);
}
}
});.progress{
background-color: pink;
transition: all 310ms ease;
width: 0px;
height: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click="startProgress">Start Progress</button>
<br><br>
<div class="progress" :style="{width : progressWidth + 'px'}">{{ progressWidth }}</div>
</div>