Vue 倒数计时器在 console.log 上打印出来，但不会作为数据传递

Question

我正在使用 moment js 将时间倒计时为 10,9,8,7,6 。它在 console.log 上成功倒计时，但我无法将其作为数据传递。

下面是我在 jsfiddle 上的代码

https://jsfiddle.net/ujjumaki/817bqn52/9/

Answer 1

把setInterval里面的函数改成箭头函数，为了让this读作Vue组件：

setInterval(() => {
      duration.subtract(interval, "milliseconds"); //using momentjs substract function
      this.countdownTimer = moment(duration.asMilliseconds()).format('s'); 
      console.log(moment(duration.asMilliseconds()).format('s'));
      /* countdown timer works for console.log */
}, interval );

Answer 2

这是因为 setInterval 处理程序中的 this 默认指向 window 对象。您可以通过向函数添加 .bind(this) 或使用 arrow function. Update JSFiddle: https://jsfiddle.net/qg4863tv

来更改此设置

在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#The_this_problem

Vue 倒数计时器在 console.log 上打印出来，但不会作为数据传递

Vue countdown timer prints out on console.log but don't get passed on as data

countdowntimer

momentjs

vue.js