0
260
ViewsDetener el contador cuando se hace clic en el botón en vuejs
Me crearon un contador simple que cuenta del 1 al 10, funciona para mí. Pero ahora necesito implementar si alguien quiere detener el contador haciendo clic en el botón, entonces debería detenerse allí y el texto en el botón también debería cambiar de
<button @click="countToTen()">**Start counting**</button>
a
<button @click="countToTen()">**Stop counting**</button>
Esto está en Vue js y soy muy nuevo en esto. Busqué mucho en Google y probé diferentes opciones, pero hasta ahora no he tenido suerte. ¡Cualquier ayuda será apreciada!
<script> const app = new Vue({ el: '#app', data: { welcomeMsg: 'Testing', result: 0, }, methods: { countToTen() { console.log("I have been Clicked " + this.result) if (this.result < 10) setTimeout(() => { this.result += 1 this.countToTen(); }, 1000) if (this.result <= 0) { clearTimeout(); return } }, } }) </script> //displaying it here: <button @click="countToTen()">Start counting</button> <p id="result">TimerStarted: {{result}}</p>Producción:
·
Juan Pablo Isaza
1 answers
Answer question0
Intente como el siguiente fragmento: puede crear propiedades de datos started y tiempo de timeout para mantener el estado setTimeout. Entonces puedes cambiar los botones con v-if y v-else
new Vue({ el: '#app', data: { welcomeMsg: 'Testing', result: 0, started: false, timeout: null }, methods: { countToTen() { this.started = true if (this.result < 10) this.timeout = setTimeout(() => { this.result += 1 this.countToTen(); }, 1000) }, stopCountToTen() { clearTimeout(this.timeout) this.started = false if(this.result === 10) this.result = 0 } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="countToTen()" v-if="!started">Start counting</button> <button @click="stopCountToTen()" v-else>Stop counting</button> <p id="result">TimerStarted: {{result}}</p> </div>
·
Juan Pablo Isaza
Report
Answer question