How to reset the countdown so that it starts from the beginning again?

[simonschaufi]

I would like to reset the counter (see resetCountdown) and tried it with the following but once I stopped and started it again, it doesn't work a second time. The counter just continues counting down on and on.

I found #39 but as you see in my code, I do just set the time prop again but as I said, it just works once.

<template>
    <div>
        <button type="button" @click="resetCountdown">Reset counter</button>

        <countdown ref="countdown" :time="time" :transform="transform" :emit-events="false">
            <template slot-scope="props">{{ props.minutes }}:{{ props.seconds }}</template>
        </countdown>
    </div>
</template>

<script>
    import VueCountdown from "@chenfengyuan/vue-countdown";

    export default {
        components: {
            'countdown': VueCountdown
        },
        data() {
            return {
                time: 5 * 60 * 1000,
            };
        },
        methods: {
            resetCountdown() {
                this.time = 5 * 60 * 1000;
            },
            transform(props) {
                Object.entries(props).forEach(([key, value]) => {
                    props[key] = value < 10 ? `0${value}` : value;
                });

                return props;
            },
        }
    }
</script>

[fengyuanchen]

Just use a v-if directive on the countdown component to start or reset it.

<countdown v-if="enable">...</countdown>

[simonschaufi]

Ok. Do you have any idea why I can't set the time prop several times?

[tafelnl]

@simonschaufi You are 'resetting' to the same value. Vue.js will not detect such a 'change', because of limitations in Javascript (https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)

You could do the following to work around this:

let time = this.time;
this.time = 0;
this.time = time;
this.$refs.countdown.start();

This works because you are first setting the time to another value and then back to the original value again, and thus triggering the change in Javascript.

[tafelnl]

@fengyuanchen It might be an idea to add a v-model to the countdown as well. This would be a breaking change I guess. So maybe an idea for the next major version. This way we can watch the v-model value instead of listening to the progress event and update that same v-model value to (re)set the countdown. I think this would be more of a 'Vue' way to go about this.

[simonschaufi]

@tafelnl Thank you very much for your idea. I will try it out.

[tafelnl]

@simonschaufi I think it might even have to be like this:

        let time = this.time;
        this.time = 0;
        setTimeout(() => {
          this.time = time;
          setTimeout(() => {
            this.$refs.countdown.start();
          }, 0)
        }, 0)

The timeouts will take care that the countdown is actually only started when the time is set to the original value again. And not when it is 0.