Vueを使ってフォーマットされたタイマーをインクリメント

Question

私は基本的なTimer Vueコンポーネントを構築しています。タイマーは秒単位で増加し、ユーザーはクリック時にタイマーを再生して一時停止することができます。ここではコンポーネントです：

<template> 
    <div v-bind:class="{workspaceTimer: isRunning}"> 
     <a class="u-link-white" href="#" @click="toggleTimer"> 
      {{ time }} 
      <span v-if="isRunning"> 
       Pause 
      </span> 
      <span v-else> 
       Play 
      </span> 
     </a> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['order'], 
     data() { 
      return { 
       time: this.order.time_to_complete, 
       isRunning: false, 
       interval: null, 
      } 
     }, 
     watch: { 
      time: function (newTime) { 
       this.saveTime() 
      } 
     }, 
     methods: { 
      toggleTimer() { 
       if (this.isRunning) { 
        clearInterval(this.interval); 
       } else { 
        this.interval = setInterval(this.incrementTime, 1000); 
       } 
       this.isRunning = !this.isRunning; 
      }, 
      incrementTime() { 
       this.time = parseInt(this.time) + 1; 
      }, 
      formattedTime() { 
       var sec_integer = parseInt(this.time, 10); 
       var hours = Math.floor(sec_integer/3600); 
       var minutes = Math.floor((sec_integer - (hours * 3600))/60); 
       var seconds = sec_integer - (hours * 3600) - (minutes * 60); 

       if (minutes < 10) {minutes = "0"+minutes;} 
       if (seconds < 10) {seconds = "0"+seconds;} 
       this.time = +minutes+':'+seconds; 
      }, 
      saveTime: _.debounce(
       function() { 
        var self = this; 
        axios.put(location.pathname, {time_to_complete: self.time}) 
        .then(function (response) { 
         console.log('timer: ' + response.data.time_to_complete); 
        }) 
        .catch(function (error) { 
         console.log('Error: ' + error); 
        }) 
       }, 
       1000 
      ) 

    } 
</script> 

私は整数として秒数をstoryingんだけど、ミリメートルとして、第2のカウントを表示したいと思います：例えば、SS、およびそのフォーマットされた増分値を持っています00:59から1:00に増分します。

メソッドまたは計算プロパティ（この例ではformattedTime()メソッドを参照）を使用して2番目の値を簡単に書式設定できますが、その文字列をインクリメントしてそのインクリメントされた文字列をフォーマットする方法はわかりません。その文字列の変更を監視し、更新された文字列をフォーマットする必要がありますか？

Answer 1

解決しました。

filters: { 
    formattedTime: function (value) { 
     var sec_num = parseInt(value, 10); 
     var hours = Math.floor(sec_num/3600); 
     var minutes = Math.floor((sec_num - (hours * 3600))/60); 
     var seconds = sec_num - (hours * 3600) - (minutes * 60); 

     //if (hours < 10) {hours = "0"+hours;} 
     if (minutes < 10) {minutes = "0"+minutes;} 
     if (seconds < 10) {seconds = "0"+seconds;} 
     return +minutes+':'+seconds; 
    } 
}, 

そして私の時間変数にそのフィルタを適用します：{{ time | formattedTime }}答えは私のコンポーネント内のローカルフィルタを使用することを実際にしました。