javascript - 如何显示嵌套数组的每个值

在我的 Vue 应用程序中，我有一个嵌套数组，用户可以选择一个日期和多个时间，这些被保存为一个对象。我现在想实现的是将日期显示为标题（可以实现），并在它下面显示属于该特定日期的所有时间。目前我只能让它显示一个时间。但如果一个对象有多个时间，我仍然只能让它显示一个时间。

有人可以看看我的代码吗？

显示数组内容的代码：

 <v-card-text >
     <v-row>
      <v-col cols="4" v-for="(i, index) in datesFinal" >
        <h4>{{i.date}}</h4>
        <v-chip>{{i.times[0].startTime + ":" + i.times[0].endTime}}</v-chip>
      </v-col>
     </v-row>
    </v-card-text>

脚本标签：

<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";

    export default {
      name: "NextMeetingCardComponent",
    
      data: () => ({
        selectedTime: [],
        dates: new Date().toISOString().substr(0,10),
        datesFinal: [],
        dialog: false,
        menu: false,
        modal: false,
        menu2: false,
        menu3: false
      }),
    
      methods:{
    
        addTimeFields(){
    
          this.selectedTime.push({
            startTime:"",
            endTime: "",
          })
        },
    
        saveDateAndTIme(e) {
          this.datesFinal.push({
            date: this.dates,
            times: this.selectedTime
            }
          )
          this.selectedTime  = [];
        }

我的方法不起作用，因为我告诉它访问 [0]，但这只是我的猜测

答案＃1

你可以尝试这个解决方案：

<v-card-text>
    <v-row>
      <v-col cols="4" v-for="(item, index) in datesFinal" :key="index" >
        <h4>{{item.date}}</h4>
        <v-chip-group v-if="item.times.length !== 0">
          <v-chip v-for="(time, i) in item.times" :key="i">
            {{time.startTime + ":" + time.endTime}} 
          </v-chip>
        </v-chip-group>
        <v-chip-group v-else>
          <v-chip>no times </v-chip>
        </v-chip-group>
      </v-col>
    </v-row>
  </v-card-text>

答案＃2

嗯，我认为我可以提供一个想法，也许你可以使用 Set 来过滤相同的日期。然后使用这个集合中的每一项从对象中收集相同日期的时间。