0

Estoy tratando de implementar un contador y quiero hacer que cuando este llegue a 0 se ejecute X acción, de prueba con un console.log bastaría, pero no logro poder hacerlo andar ya que mi comprensión de la propiedad Watch no es mucha.

Actualmente en la parte visual, si llego a 0 me salta el mensaje ese que tengo en el v-else "llegaste a 0" pero yo quiero hacer en la parte del script, porque cuando llegue a 0 tendría que ejecutar un metodo, como se les ocurre que podría hacer?

Sin más preámbulos les dejo el código.

HTML

    <div id="vue">
    <div v-if="timerCount > 0">
    {{ timerCount }}
    </div>
    <div v-else>
    llegaste a 0
    </div>
    </div>

VUE

<script>
var vue = new Vue({
    el: "#vue", 
    data:{
        timerCount: 30
    },
    watch: {

         timerCount: {
                  handler(value) {

                      if (value > 0) {
                      setTimeout(() => {
                          this.timerCount--;
                        }, 1000);
                      }            

                  },
           immediate: true 
          }

}
});
</script>

Desde ya muchas gracias por la ayuda, Saludos cordiaales.

1 respuesta 1

1

Creo que lo podrías hacer más fácil con setInterval en el mounted o como una función definida en los methods simplementa guardas el identificador del intervalo u cuando se cumpla la condición de parada limpias el intervalo usando clearInterval

Tu código quedaría así:

var vue = new Vue({
  el: "#vue",
  data: {
    timerCount: 5
  },
  mounted() {
    const intervalId = setInterval(() => {
      this.timerCount--;
            
      if (this.timerCount === 0) {
        clearInterval(intervalId);
        // Ejecuta alguna funcion e.g: 
        console.log('Hello world');
      }
    }, 1000);
  },
});
<div id="vue">
    <div v-if="timerCount > 0">
        {{ timerCount }}
    </div>
    <div v-else>
        llegaste a 0
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1
  • Mil gracias @Daniel Rodriguez Meza, me funciono perfectamente y además me ayudo a solucionar el tema del delay, que no se porque con el setTimeout yo cuando traia de nuevo el timerCount de una api, y quería volverlo a traer en una siguiente pantalla me andaba mucho más rapido que la primera vez(siempre era el mismo campo que se pisaba). Y esto me ayudo a hacerlo funcionar correctamente, a que se puede deber? Tenes idea? Desde ya muchas gracias, pregunta solucionada Commented el 6 jul. 2020 a las 20:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.