Breaking News: Grepper is joining You.com. Read the official announcement!

vue js count down timer

Add Answer

Faithful Fox answered on May 15, 2020 Popularity 8/10 Helpfulness 2/10

answer vue js count down timer

related vue js countdown timer

related countdown using vue

vue js count down timer

Comment

<template>
    {{ timerCount }}
</template>

<script>

    export default {

        data() {
            return {
                timerEnabled: true,
                timerCount: 30
            }
        },

        watch: {

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

            timerCount: {
                handler(value) {

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

                },
                immediate: true // This ensures the watcher is triggered upon creation
            }

        }

        methods: {

            play() {
                this.timerEnabled = true;
            },

            pause() {
                this.timerEnabled = false;
            }

        }

    }

</script>

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: count javascript timer

Link to this answer
Share Copy Link

Contributed on Mar 11 2021

Faithful Fox

0 Answers Avg Quality 2/10

Closely Related Answers

vue js countdown timer

Comment

<template>
   {{ countDown }}
</template>

<script>
    export default {
        data() {
            return {
                countDown : 10
            }
        },
        method: {
            countDownTimer() {
                if(this.countDown > 0) {
                    setTimeout(() => {
                        this.countDown -= 1
                        this.countDownTimer()
                    }, 1000)
                }
            }
        }
        created: {
           this.countDownTimer()
        }
    }
</script>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: countdown coun

Link to this answer
Share Copy Link

Contributed on Nov 19 2020

Outrageous Okapi

0 Answers Avg Quality 2/10

countdown using vue

Comment

<template>
    {{ timerCount }}
</template>

<script>

    export default {

        data() {
            return {
                timerCount: 30
            }
        },

        watch: {

            timerCount: {
                handler(value) {

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

                },
                immediate: true // This ensures the watcher is triggered upon creation
            }

        }
    }

</script>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: countdown coun

Link to this answer
Share Copy Link

Contributed on May 15 2020

Elegant Earthworm

0 Answers Avg Quality 2/10

vue js count down timer

Contents

More Related Answers

vue js count down timer

Closely Related Answers

vue js countdown timer

countdown using vue

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.