What is the best way to do it?

Question

Vue.js

there is such a task
At the input we accept json of the form:

{
 "mo": [ { "bt": 240, "et": 779 } ],
 "tu": [ ],
 "we": [ ],
 "th": [ { "bt": 240, "et": 779 }, { "bt": 1140, "et": 1319 } ],
 "fr": [ { "bt": 660, "et": 1019 } ],
 "sa": [ { "bt": 0, "et": 1439 } ],
 "su": []
}

The data in json corresponds to the picture, the interval data is received and transmitted in minutes of the day, but in our case we are working with hours.
Example:
Interval in hours 1:00 to 2:00 = 60 to 119
Minutes of the day (0 - 1439)



There are several questions, but I will write one at a time.

1) I understand correctly, you need to manually create each block that corresponds to the hour and pass the correspondence to the hour for each block in the date attribute (more clearly here https://codepen.io/DimaDolgoter/pen/WNrxaKG?editor...

it seems this is not correct. It’s probably better to count the block in the order that was clicked on and multiply its order by 60. And it also doesn’t look very good if you create so many blocks, maybe there is a better solution
?@click="getHours()"Again, it seems stupid to do this and most likely there are better solutions