vuejs 定时器组件重启/停止

【问题标题】：vuejs timer component restart/stopvuejs 定时器组件重启/停止
【发布时间】：2018-12-05 07:08:56
【问题描述】：

我必须设置一个重定向到主屏幕的 10 分钟计时器。此外，它必须在每个动作（例如按钮按下）上重置。我找到了这个计时器：https://github.com/fengyuanchen/vue-countdown 是否可以在操作时重新启动它？

<countdown ref="countdown" @end="dosmth()" :time="time" :auto-start="false">
<template slot-scope="props">{{ props.seconds }}</template>
</countdown>

mounted() {
    this.$refs.countdown.start();
  },


dosmth: function(){
          this.$refs.countdown.start();
        }

这应该重新启动计时器，但即使这样也不起作用：

篮子.vue:378 [Vue 警告]：“end”的事件处理程序出错：“InternalError: too much recursion”

也许有人可以帮助我？

【问题讨论】：

nvm 想通了：this.$refs.countdown.totalMilliseconds = time;

标签： javascript vue.js countdown

【解决方案1】：

您可以使用setInterval 执行此操作，并在每次点击操作时将值重置为初始值：

const TEN_MINUTES = 60 * 10

new Vue({
  el: '#app',
  data () {
    return {
      timer: TEN_MINUTES
    }
  },
  filters: {
    minutesAndSeconds (value) {
      var minutes = Math.floor(parseInt(value, 10) / 60)
      var seconds = parseInt(value, 10) - minutes * 60
      return `${minutes}:${seconds}`
    }
  },
  mounted () {
    setInterval(() => {
      this.timer -= 1
    }, 1000)
  },
  methods: {
    someAction () {
      this.timer = TEN_MINUTES
    },
    someOtherAction () {
      this.timer = TEN_MINUTES
    }
  },
  template: `<div><div>Time Remaining: {{ timer | minutesAndSeconds }}</div><br><br><button @click="someAction">Some Action</button><button @click="someOtherAction">Some Other Action</button></div>`
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：

非常感谢