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

[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.

[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.

[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.