In my application, there is a small form where users can add a date with multiple start and end times which are then stored in an array. This process can be repeated as many times as needed.
Here is how the array structure looks:
datesFinal: {meetingName: "", meetingPw:"", meetingUrl: "",
meetingTime: []} ,
The "meetingTime" object holds the date, start time, and end time values. An example of one value form could be:
"meetingTime":[
{
"date":"2021-06-21",
"startTime":"15:30",
"endTime":"16:30"
},
{
"date":"2021-06-21",
"startTime":"15:30",
"endTime":"17:30"
},
Now, I am trying to make my app loop through this array and display the dates that have the same date value. For example, if two objects share the date 2021-06-21, they should be displayed like this:
2021-06-21 15:30-17:30 15:30-16:30
The times for the same date should be grouped together. However, when attempting to loop through the array to display the complete object without filtering, I encountered an error stating it is undefined (times undefined).
If anyone could take a look at my code and provide guidance, I would appreciate it:
<v-col cols="12" v-for="(timesForDate, i) in datesFinal" key="i">
<h4>{{ datesFinal.meetingTime}}</h4>
<v-chip-group v-if="time.length">
<v-chip v-for="(time, j) in datesFinal.meetingTime" :key="j">{{
time.startTime + ":" + time.endTime
}}</v-chip>
</v-chip-group>
</v-col>