循环遍历对象数组时出现未定义错误

Question

我正在为一个活动日程页面渲染日期列表，但在渲染 extraRounds 列表时遇到了问题。这基本上与顶部初始实例完全相同，但我需要一个循环来遍历可能添加的对象数组。

我有条件状态来显示 extraRounds 如果有的话，给每个项目一个标题和显示的事件的索引，但是当涉及到将每个对象的信息输入到我的计算属性出现此错误： Expected Object, got Date

我认为Date 属性本身就是一个对象，但我猜不是

如何让插值日期正确显示而不会出现该错误？这个循环我哪里出错了？

index.dateVotingOpenConverted 和 extraRound.dateVotingOpenConverted 都不起作用。

任何指针/帮助将不胜感激！

干杯！

代码沙盒： 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

在组件的 prop 部分使用 type: Date 代替 type: Object。所以例如dateSubmissionOpen 道具应该是这样的：dateSubmissionOpen: { type: Date }。它在您提供的代码笔中工作。