javascript - 如何遍历数组并在vue中直观地显示单个元素
问题描述
我有一个应用程序,我有一个小表单,用户可以在其中添加一个具有多个开始和结束时间的日期,然后将其放入一个数组中。这个过程可以根据需要重复多次。
这是该数组的外观:
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>
解决方案
我的建议是:不要试图通过调整 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>
推荐阅读
- r - 在 R 中跨多个时间段查找公共 ID 变量
- python - Python lambda 函数在 pandas df 中滚动
- azure-automation - Azure 自动化无法取消链接计划“无法从 Runbook 取消链接计划”
- flash - 有没有办法将现有的 SWF 文件修改为本地文件系统?
- r - 如何使方程式公式在闪亮的 R 中具有反应性?
- c# - 是否可以在事件中访问 ref 传递的对象?
- python - Hopfield 网络实现不收敛到学习模式之一
- python - PhraseMatcher 不匹配 LEMMA
- javascript - 无法在精确坐标处附加可拖动元素
- gitlab-ci - Gitlab-CI 管道对另一个 git repo 发出合并请求