Vue.JS обратный отсчет не работает

Question

У меня есть vue-приложение, но обратный отсчет не работает хорошо. На самом деле я не знаю почему.

View {{ $parent.timer }} Я вижу хорошее значение.

Вью данные:

data: function() { 
     return { 
     timer : 3, 
... 

и вот мой обратный отсчет функции:

countdown : function(time,callback) 
    { 
     //time is equal 5 
     this.timer = time; 
     //this.timer is equal 5 
     var timerInterval = undefined; 

     timerInterval = setInterval(function() { 
      if(this.timer == 1) { 
       this.timer = 0; 
       callback(); 
       return clearInterval(timerInterval); 
      } 
      // First time undefined, in 2nd is NaN 
      this.timer -= 1; 
      // NaN 
     }, 1000); 
    } 

вызов функции:

this.countdown(data.time,function(){ //smtng }); 

Что я делать плохо? Его работа в моем старшем приложении Vue.

Надеюсь, кто-то может мне помочь :) Большое спасибо!

Answer 1

Это проблема с охватом this, как описано ниже:

function() {...} создает новую область внутри. Если вы используете в этой функции , это не относится к внешней области. Поэтому ваш this.timer компонента Vue не обновляется внутри вашего setInterval().

() => {...} работает как функция, но не создает новую область внутри.

Проверьте следующий код работает:

timerInterval = setInterval(() => { 
    if(this.timer == 1) { 
     this.timer = 0; // `this` points to the scope of Vue component 
     callback(); 
     // ... 
    } 
    // ... 
}, 1000); 

Более подробная информация о функциях стрелок: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions