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있어이 있지만 mm로 그 두 번째 수를 표시 할 것 : SS, 그리고이 그 포맷 값 증가, 예를 들어, 00:59가 1:00로 증가합니다.

메서드 또는 계산 된 속성을 사용하여 두 번째 값을 쉽게 형식화 할 수 있지만 (이 예제에서는 formattedTime() 메서드를 참조하십시오.) 해당 문자열을 증가시키고 그 증가하는 문자열을 서식 지정하는 방법에 대해서는 확신이 없습니다. 해당 문자열의 변경 사항을 살펴보고 업데이트 된 문자열의 형식을 지정해야합니까?

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 }} 대답은 내 구성 요소에서 로컬 필터를 사용하는 사실이었다.