Intento hacer una barra de progreso con VueJS, pero cuando este recuento es igual a 100, el intervalo sigue en proceso. ¿Cómo puedo detener el intervalo cuando los datos equivalen al 100 por ciento?
Usé el comando console.log() para verificar si el código funciona, pero devuelve una respuesta incorrecta.
Saludos,
Ese es mi código:
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('--'); } }, });si lo desea, puede verificar en vivo en jsFidde: https://jsfiddle.net/6j05p8Lb/46/
Como lo mencionó @Lawrence Cherone , use la función clearInterval :
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>