如何遍歷嵌套數組

Question

我有一個嵌套數組，如下所示：

"meetingTime":[
         [
            {
               "date":"2021-05-30",
               "startTime":"15:30",
               "endTime":"11:11"
            }
         ],
         [
            {
               "date":"2021-06-29",
               "startTime":"17:00",
               "endTime":"19:00"
            }
         ],
         [
            {
               "date":"2021-06-29",
               "startTime":"14:00",
               "endTime":"15:06"
            },
            {
               "date":"2021-06-29",
               "startTime":"14:00",
               "endTime":"12:00"
            }
         ]
      ]
   }
]

我現在要做的是循環遍歷這個數組並為每個日期輸出可用時間。 例如，在此示例中，2021 年 6 月 29 日的 startTime 為 14:00 - 12:00 和 startTime 14:00 - 15:06。 這就是我構造數組的方式：

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

export default {
  name: "GenerateMeetingSettings",

  data: () => ({
    selectedTime: [],
    finalMeeting: [],
    datesFinal: [{meetingName: "",
      meetingTime: []}] ,
    dates: new Date().toISOString().substr(0,10),
    meetingSettingUrl: "",
    meetingPW: "",
    generatedLink: false,
    meetingName: "",
    dialog: false,
    menu: false,
    modal: false,
    menu2: false,
    menu3: false
  })
,

  methods:{

    addTimeFields(){
      this.selectedTime.push({
        date: this.dates,
        startTime:"",
        endTime: "",
      })
    },
    saveDateAndTIme(e) {
        this.datesFinal[0].meetingTime.push(this.selectedTime),

          this.selectedTime = []


    },

這就是我試圖顯示的值，但這次嘗試沒有運氣，也許有人可以在這里幫助我：

編輯

<v-col cols="12" v-for="(time, timeIndex) of time.meetingTime" key="index2">
    <h4>{{i.meetingTime.date}}</h4>
    <v-chip-group v-if="i.times.length !== 0">
      <v-chip v-for="(time, timeIndex) in time.meetingTime" :key="timeIndex">{{
          time.startTime + ":" + time.endTime
        }}</v-chip>
    </v-chip-group>
  </v-col>

編輯錯誤：

[Vue warn]: Property or method "time" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <GenerateMeetingSettings> at src/components/GenerateMeetingSettings.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

eval @ main.js?56d7:21
./src/main.js @ app.js:1273
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1358
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
Show 48 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'meetingTime' of undefined"

found in

---> <GenerateMeetingSettings> at src/components/GenerateMeetingSettings.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'meetingTime' of undefined
    at Proxy.render (GenerateMeetingSettings.vue?90fe:384)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm

Answer 1

代碼中有幾個部分沒有意義。

1. <h4>{{i.meetingTime.date}}</h4> i在哪里被取消許可？
2. <v-chip-group v-if="i.times.length !== 0"> i有times屬性嗎？

這是我未經測試的代碼。

<v-col cols="12" v-for="(timesForDate, i) in meetingTime" key="i">
  <h4>{{ timesForDate[0].date }}</h4>
  <v-chip-group v-if="time.length">
    <v-chip v-for="(time, j) in timesForDate" :key="j">
      {{ time.startTime + ":" + time.endTime }}
    </v-chip>
  </v-chip-group>
</v-col>

第一個循環中的meetingTime是帖子中給出的meetingTime數組。 因為它是 object 值，所以肯定可以用 object.key 類型替換，即datesFinal.meetingTime

Answer 2

<v-col cols="12" v-for="(time, timeIndex) of time.meetingTime" key="index2">正在尋找一個名為 time 的變量，因為您希望它遍歷time.meetingTime 。

您的data不包含名為time的字段，這就是您收到錯誤的原因。 您可能打算使用selectedTime ？