0
254
ViewsStop counter when clicked on the button in vuejs
I am created a simple counter that count from 1 to 10, Its works for me. But now I need to implement if someone want to stop the counter by clicking on the button then it should stop there and the text in the Button should also changed from
<button @click="countToTen()">**Start counting**</button>
to
<button @click="countToTen()">**Stop counting**</button>
This is in Vue js and I am very new to it. Have googled a lots and tried different options but no luck so far with it. Any Help Will be Appreciated !
<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>
OutPut:
·
Juan Pablo Isaza
1 answers
Answer question0
Try like following snippet:
You can create data properties started and timeout for holding setTimeout state.
Then You can switch buttons with v-if and 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