使用Vue按秒计数

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

<模板>
<a class="u-link-white" href="#" @click="toggleTimer">{{ 时间 }}</a></div></模板><脚本>导出默认{道具:['订单']，数据() {返回 {时间:this.order.time_to_complete，isRunning:假，}},方法: {切换定时器(){var 间隔 = setInterval(this.incrementTime, 1000);如果(this.isRunning){//调试器清除间隔(间隔)；console.log('定时器停止');} 别的 {console.log('定时器开始');}this.isRunning = (this.isRunning ? false : true);},增量时间(){this.time = parseInt(this.time) + 1;},}}</脚本>

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

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

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

解决方案

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

console.clear()新的 Vue({埃尔:div"，数据() {返回 {时间:0，isRunning:假，间隔:空}},方法: {切换定时器(){如果(this.isRunning){clearInterval(this.interval);console.log('定时器停止');} 别的 {this.interval = setInterval(this.incrementTime, 1000);}this.isRunning = !this.isRunning},增量时间(){this.time = parseInt(this.time) + 1;},}})

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

I'm creating a small timer Vue component. A user needs to be able to start and stop that timer. Here's my component thus far:

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

I'm toggling the isRunning variable to determine whether the timer is running or not. On first click (the play), the timer begins and increments successfully.

However, on the second click (the pause), the isRunning var toggles back to off, but clearInterval(this.incrementTime) is not clearing the interval and pausing the timer. When I insert that debugger, and manually hit clearInterval(interval) via the console, it returns undefined.

Does anybody have any insight on how I've formatted my component incorrectly?

解决方案

Here is a working example covering the concepts I mentioned in the comment above. This is not an exact implementation of your component, just an example to show you how it could work.

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>