Vue JS timepicker SUM Hours dan Minutes Calculation-CodePudding

I have a problem when calculating the total from the timepicker on the repeater field. I created a function on vue js computed.

Here's the script:

This ini my calculation script:

computed: {
        totalDuration: function() {
          let total = 0;
          this.detail_data.map( item => {
            total  = item.hour_timespan
          })
          return total;
        }
      },

The data I want to display is like this: Total Duration : 23:30

CodePudding user response：

Hi @Toni Rhubanaga,

You can modify your computed property like this.

First, you can loop through the detail_data array and add up the hour_timespan values, which you are already have done. Then, you could convert the total number of minutes into hours and minutes by dividing the total number of minutes by 60, I guess. Then, use toString() for in a string in the format HH:MM.

computed: {
  totalDuration: function() {
    let totalMinutes = 0;
    this.detail_data.map( item => {
      totalMinutes  = item.hour_timespan
    })

    let hours = Math.floor(totalMinutes / 60);
    let minutes = totalMinutes % 60;

    return hours.toString().padStart(2, '0')   ':'   minutes.toString().padStart(2, '0');
  }
},

Well, it converts the total number of minutes into hours and minutes, and then format the result as a string in the format. Total duration in the format HH:MM, Right. And display the total duration in your HTML, like this.

<div>Total Duration: {{ totalDuration }}</div>