如何显示嵌套数组的每个值答案

【问题标题】：how to display every value of an nested array如何显示嵌套数组的每个值
【发布时间】：2021-08-12 01:56:11
【问题描述】：

在我的 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] 但这只是我的猜测

【问题讨论】：

标签： javascript typescript vue.js vuetify.js

【解决方案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>

【讨论】：

遗憾的是，这给了我错误：无法读取时间的属性，我想这是因为时间在 datesFinal 内。我尝试了您的解决方案，对 datesFinal.times 稍作修改，但这会返回一个空值，不显示任何时间。
此代码应该可以工作 (demo)。您看到的错误可能是因为并非所有 datesFinal 数组元素都具有 times 属性。然后您可以事先检查item.times：v-if="item.times && item.times.length > 0"。

【解决方案2】：

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

【讨论】：