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

Question

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

这是该数组的外观：

datesFinal: {meetingName: "", meetingPw:"", meetingUrl: "",
      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 它应该显示如下：

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>

Answer 1

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

new Vue({
  el: "#app",
  data() {
    return {
      datesFinal: {
        meetingName: "This is the meeting name",
        meetingTime: [{
            "date": "2021-06-21",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-21",
            "startTime": "15:30",
            "endTime": "17:30"
          },
          {
            "date": "2021-06-23",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-22",
            "startTime": "15:30",
            "endTime": "17:30"
          },
          {
            "date": "2021-06-20",
            "startTime": "15:30",
            "endTime": "16:30"
          },
          {
            "date": "2021-06-22",
            "startTime": "15:30",
            "endTime": "17:30"
          },
        ],
      },
    }
  },
  methods: {
    // grouping the meeting times by date
    // the function expects an array of objects
    // with a structure:
    // [{ date: "foo", startTime: "bar", endTime: "baz" },
    // { date: "foo", startTime: "bar3", endTime: "baz3" },
    // { date: "foo2", startTime: "bar2", endTime: "baz2" }]
    // it creates an Object with a structure:
    // { foo: ["bar-baz", "bar3-baz3"], foo2: ["bar2-baz2"] }
    processMeetingTimes(meetingTimeArray) {
      const ret = meetingTimeArray
        .reduce((a, c) => {
          if (!(c.date in a)) a[c.date] = []
          a[c.date] = [...a[c.date], `${c.startTime}-${c.endTime}`]
          return a
        }, {})
      console.log("processMeetingTimes", ret)
      return ret
    },
    // creating the array of strings that the v-for
    // can iterate over easily
    // it expects an Object with a structure:
    // { foo: ["bar-baz", "bar3-baz3"], foo2: ["bar2-baz2"] }
    // and creates an Array with a structure:
    // ["foo bar-baz bar3-baz3", "foo2 bar2-baz2"]
    createMeetingTimeArray(processedMeetingTimes) {
      const ret = Object.entries(processedMeetingTimes).map(([key, val]) => `${key} ${val.join(" ")}`)
      console.log("createMeetingTimeArray", ret)
      return ret
    },
  },
  template: `
    <div>
      {{ datesFinal.meetingName }}
      <div
        v-for="time in createMeetingTimeArray(
          processMeetingTimes(datesFinal.meetingTime)
        )"
        :key="time"
      >
        {{ time }}
      </div>
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>