Javascript 如何循环数组并在vue中直观地显示单个元素

我有一个应用程序，其中我有一个小表单，用户可以添加一个日期和多个开始和结束时间，然后将其放入一个数组中。这个过程可以根据需要重复多次

这就是该阵列的外观：

datesFinal: {meetingName: "", meetingPw:"", meetingUrl: "",
      meetingTime: []} ,

在meetingTime日期中，将保存开始、结束时间。一种价值形式可以是这样的：

 "meetingTime":[
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"16:30"
      },
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"17:30"
      },

我现在想要实现的是，我的应用程序在这个数组中循环，并查看两个对象的日期是否相同。在本例中，日期是2021.06.21的两倍。它应该显示如下：

 "meetingTime":[
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"16:30"
      },
      {
         "date":"2021-06-21",
         "startTime":"15:30",
         "endTime":"17:30"
      },

2021.06.21 15:30-17:30 15:30-16:30

属于同一日期的时间应该在它下面收集。我尝试在数组中循环，以首先显示完整的对象，而无需任何筛选。但是我得到的错误是它是未定义的（乘以未定义）

有人能看看我的代码并给我一个指针吗：

 <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>

{{datesFinal.meetingTime}
{{
time.startTime+“：”+time.endTime
}}

我的建议是：不要试图通过调整UI来解决这个问题。将您的数据转换为所需的结构，并让模板在您能想到的最简单的数据结构上迭代

newvue({
el:“应用程序”，
数据（）{
返回{
日期最终：{
会议名称：“这是会议名称”，
会议时间：[{
“日期”：“2021-06-21”，
“开始时间”：“15:30”，
“结束时间”：“16:30”
},
{
“日期”：“2021-06-21”，
“开始时间”：“15:30”，
“结束时间”：“17:30”
},
{
“日期”：“2021-06-23”，
“开始时间”：“15:30”，
“结束时间”：“16:30”
},
{
“日期”：“2021-06-22”，
“开始时间”：“15:30”，
“结束时间”：“17:30”
},
{
“日期”：“2021-06-20”，
“开始时间”：“15:30”，
“结束时间”：“16:30”
},
{
“日期”：“2021-06-22”，
“开始时间”：“15:30”，
“结束时间”：“17:30”
},
],
},
}
},
方法：{
//按日期分组会议时间
//函数需要一个对象数组
//具有以下结构：
//[{日期：“foo”，开始时间：“bar”，结束时间：“baz”}，
//{日期：“foo”，开始时间：“bar3”，结束时间：“baz3”}，
//{日期：“foo2”，开始时间：“bar2”，结束时间：“baz2”}]
//它创建具有以下结构的对象：
//{foo:[“bar-baz”，“bar3-baz3”]，foo2:[“bar2-baz2”]}
processMeetingTimes（meetingTimeArray）{
const ret=会议时间数组
.减少（（a，c）=>{
如果（！（a中的c.date））a[c.date]=[]
[c.date]=[…a[c.date]，`${c.startTime}-${c.endTime}`]
归还
}, {})
log（“processMeetingTimes”，ret）
回程网
},
//创建v-for
//可以很容易地迭代
//它需要一个具有以下结构的对象：
//{foo:[“bar-baz”，“bar3-baz3”]，foo2:[“bar2-baz2”]}
//并创建具有以下结构的数组：
//[“foo bar baz bar3-baz3”、“foo bar2-baz2”]
createMeetingTimeArray（processedMeetingTimes）{
const ret=Object.entries（processedMeetingTimes）.map（[key，val]）=>`${key}${val.join（“”}`）
log（“createMeetingTimeArray”，ret）
回程网
},
},
模板：`
{{datesFinal.meetingName}
{{time}}
`
})

我建议使用computed for逻辑，而不是复杂的嵌套v-for和v-If，这是什么意思？我是vue的新手，我必须用它来写论文