javascript - 循环遍历对象数组时出现未定义的错误
问题描述
我正在为活动安排页面处理呈现的日期列表,并且在呈现extraRounds列表时遇到问题。这基本上与顶部初始实例完全相同,但我需要一个循环来遍历可能添加的对象数组。
我有条件状态来显示extraRounds(如果有),给每个项目一个标题和显示的事件的索引,但是当将每个对象的信息输入到我的计算属性中时,我得到了这个错误:
Expected Object, got Date
我认为该Date
属性是一个对象本身,但我猜不是
如何在没有该错误的情况下正确显示插值日期?这个循环我哪里出错了?
index.dateVotingOpenConverted
两者extraRound.dateVotingOpenConverted
都不起作用。
任何指针/帮助将不胜感激!
干杯!
CodeSandbox: https ://codesandbox.io/s/event-schedule-gukrb
活动日程
<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>
你好世界
<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>
解决方案
只是代替在组件的 prop 部分中type: Object
使用。type: Date
所以例如dateSubmissionOpen
prop 应该是这样的dateSubmissionOpen: { type: Date }
:它在您提供的代码笔中工作。
推荐阅读
- ckeditor - CKEditor 在保存时正在更改我的 SRC 或 Href
- string - sqlite instr 函数在某些情况下不起作用
- java - 如何在 onActivityResult 之后修复 JNI 代码中的 Android 崩溃?
- opencv - 如果我使用裁剪对象或全帧来训练级联分类器,有什么区别吗?
- java - 检索 Firebase 对象空指针异常
- c# - 如何在 VS 中正确处理引用
- java - Netty 的 FixedChannelPoolMap 不能维护旧频道?
- c# - 过滤绑定列表
- python - 如何限制没有终端或多处理库的python脚本使用的CPU数量?
- laravel - “试图获取非对象的属性‘标题’”Middleware\VerifyCsrfToken.php:180