Undefined error while looping through an array of objects

Question

I'm working on a rendered list of dates for an event schedule page and am having trouble rendering a list of extraRounds. This basically works exactly the same as the top intial instance, but I need a loop to get through the array of objects that could pontentially be added.

I have the conditional state to show the extraRounds if there are any, to give each item a title with the index of the event shown, but when it comes to feeding the information of each object into my computed properties I get this error: Expected Object, got Date

I thought the Date attribute was an object itself, but I guess not

How can I get the interpolated dates to show properly without that error? Where am I going wrong with this loop?

index.dateVotingOpenConverted and extraRound.dateVotingOpenConverted both are not working.

Any pointers/ help would be greatly appreciated!

Cheers!

CodeSandbox: https://codesandbox.io/s/event-schedule-gukrb

EventSchedule

<template>
  <div class="event-schedule-info">
    <div class="_pill _color">Round 1</div>
    <div class="_row">
      <div class="_pill _clear">Applications</div>
      <div class="_date">
        {{ dateSubmissionOpenConverted }}〜{{ dateSubmissionCloseConverted }}
      </div>
    </div>
    <div class="_row">
      <div class="_pill _clear">Voting</div>
      <div class="_date">
        {{ dateVotingOpenConverted }}〜{{ dateVotingCloseConverted }}
      </div>
    </div>
    <div class="_row">
      <div class="_pill _clear">Results</div>
      <div class="_date">{{ dateResultAnnouncementConverted }}</div>
    </div>
    <br />
    <div v-if="extraRounds">
      <div
        v-for="(extraRound, index) in extraRounds"
        :key="'extraRound' + index"
        class="event-schedule-info"
      >
        <div class="_pill _color">Round {{ index + 2 }}</div>
        <div class="_row">
          <div class="_pill _clear">Applications</div>
          <div class="_date">
            {{ index.dateVotingOpenConverted }}〜{{
              index.dateVotingCloseConverted
            }}
          </div>
        </div>
        <div class="_row">
          <div class="_pill _clear">Results</div>
          <div class="_date">{{ index.dateResultAnnouncementConverted }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.event-schedule-info > *
  margin-bottom: 10px

._pill
  height: 21px
  width: 83px
  left: 207px
  top: 814px
  font-size: 14px
  font-style: normal
  font-weight: 400
  line-height: 21px
  letter-spacing: 0em
  text-align: center
  border-radius: 20px

._color
  color: white
  background-color: indianred

._clear
  color: indianred
  background-color: white
  border: solid 1px indianred

._row
  display: flex
  justify-content: flex-start
  align-items: center

._date
  font-family: Hiragino Maru Gothic Pro
  font-size: 18px
  font-style: normal
  font-weight: 400
  line-height: 27px
  letter-spacing: 0em
  text-align: left
  padding: 0 5px

._vote
  padding-right: 5px
  text-decoration: underline
  font-family: Hiragino Maru Gothic Pro
  font-style: normal
  font-weight: normal
  font-size: 13px
  line-height: 19px
  color: indianred
</style>

<script>
export default {
  name: "EventScheduleInfo",
  props: {
    /**
     * @type {Date}
     */
    dateSubmissionOpen: { type: Object },
    /**
     * @type {Date}
     */
    dateSubmissionClose: { type: Object },
    /**
     * @type {Date}
     */
    dateVotingOpen: { type: Object },
    /**
     * @type {Date}
     */
    dateVotingClose: { type: Object },
    /**
     * @type {Date}
     */
    dateResultAnnouncement: { type: Object },
    /**
     * @type {[{ dateVotingOpen: {Date}, dateVotingClose: {Date}, dateResultAnnouncement: {Date} }]}
     */
    extraRounds: { type: Array },
  },
  data() {
    return {};
  },
  methods: {
    monthDayConverted(d) {
      return d.toLocaleString("ja", { month: "long", day: "numeric" });
    },
    monthDayTimeConverted(d) {
      return d.toLocaleString("ja", {
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    },
  },
  computed: {
    dateSubmissionOpenConverted() {
      return this.monthDayConverted(this.dateSubmissionOpen);
    },
    dateSubmissionCloseConverted() {
      return this.monthDayConverted(this.dateSubmissionClose);
    },
    dateVotingOpenConverted() {
      return this.monthDayConverted(this.dateVotingOpen);
    },
    dateVotingCloseConverted() {
      return this.monthDayConverted(this.dateVotingClose);
    },
    dateResultAnnouncementConverted() {
      return this.monthDayTimeConverted(this.dateResultAnnouncement);
    },
  },
};
</script>

HelloWorld

<template>
  <div class="hello">
    <EventSchedule
      :dateSubmissionOpen="new Date('2020/06/01')"
      :dateSubmissionClose="new Date('2020/06/30')"
      :dateVotingOpen="new Date('2020/06/30')"
      :dateVotingClose="new Date('2020/07/10')"
      :dateResultAnnouncement="new Date('2020/07/14 12:00:00')"
      :extraRounds="[
        {
          dateVotingOpen: new Date('2020/07/16'),
          dateVotingClose: new Date('2020/07/26'),
          dateResultAnnouncement: new Date('2020/07/31 12:00:00'),
        },
        {
          dateVotingOpen: new Date('2020/08/20'),
          dateVotingClose: new Date('2020/08/26'),
          dateResultAnnouncement: new Date('2020/08/31 12:00:00'),
        },
        {
          dateVotingOpen: new Date('2020/09/16'),
          dateVotingClose: new Date('2020/09/26'),
          dateResultAnnouncement: new Date('2020/09/31 12:00:00'),
        },
      ]"
    />
  </div>
</template>

<script>
import EventSchedule from "./EventSchedule";
export default {
  name: "HelloWorld",
  components: { EventSchedule },
  props: {},
};
</script>

Answer 1

just instead of type: Object use type: Date in the prop section of your component. so for example dateSubmissionOpen prop should look like this: dateSubmissionOpen: { type: Date }. it worked in the codepen you provided.