javascript - 使用Vue按秒统计

Question

我正在创建一个小型计时器 Vue 组件。用户需要能够启动和停止该计时器。到目前为止，这是我的组件:

<template>
    <div>
        <a class="u-link-white" href="#" @click="toggleTimer">
            {{ time }}
        </a>
    </div>
</template>

<script>
    export default {
        props: ['order'],
        data() {
            return {
                time: this.order.time_to_complete,
                isRunning: false,
            }
        },
        methods: {
            toggleTimer() {
                var interval = setInterval(this.incrementTime, 1000);
                if (this.isRunning) {
                    //debugger
                    clearInterval(interval);
                    console.log('timer stops');
                } else {
                    console.log('timer starts');
                }
                this.isRunning = (this.isRunning ? false : true);
            },
            incrementTime() {
                this.time = parseInt(this.time) + 1;
            },
        }
    }
</script>

我正在切换 isRunning 变量以确定计时器是否正在运行。第一次单击(播放)时，计时器开始并成功递增。

然而，在第二次点击(暂停)时，isRunning var 切换回关闭状态，但 clearInterval(this.incrementTime) 并未清除间隔并暂停定时器。当我插入该调试器并通过控制台手动点击 clearInterval(interval) 时，它返回未定义。

有人知道我如何错误地格式化我的组件吗？

Answer 1

这是一个工作示例，涵盖了我在上面评论中提到的概念。这不是您的组件的精确实现，只是一个向您展示它如何工作的示例。

console.clear()
new Vue({
  el: "div",
  data() {
    return {
      time: 0,
      isRunning: false,
      interval: null
    }
  },
  methods: {
    toggleTimer() {
      if (this.isRunning) {
        clearInterval(this.interval);
        console.log('timer stops');
      } else {
        this.interval = setInterval(this.incrementTime, 1000);
      }
      this.isRunning = !this.isRunning
    },
    incrementTime() {
      this.time = parseInt(this.time) + 1;
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div>
  <a class="u-link-white" href="#" @click="toggleTimer">
    {{ time }}
   </a>
</div>