我正在建立排行榜。我有一群领导者。同一团队有多个参赛作品。我只想为每个团队显示一个条目(最好是最近的条目)。我正在为数据库使用Firestore。
我的html看起来像这样。 (为简化起见,我缩短了代码)
<div v-for="tracker in trackers" :key="tracker.id">
<div>{{tracker.team.team_name}}</div>
</div>
如果我将此{{ tracker }}
添加到HTML中,这就是一个跟踪器拆分出的内容
{
"team": {
"bio": "<div><!--block-->This is Team One's Bio</div>",
"fullPath": "avatars/XXXXXX.jpg",
"team_id": "1",
"team_name": "Team One",
"url": "XXXXXXX",
"id": "XXXXXXX"
},
"tracker": {
"clue": "2",
"code": "23456",
"diff": 5269841,
"team": "1"
}
}
我有多个团队。我只想为每个"team"
显示一个跟踪器,因此基本上按"teams"
分组
非常感谢您的帮助
答案 0 :(得分:1)
由于您标记了问题compute-properties,因此您处于正确的轨道。只需创建一个计算属性即可将跟踪者限制为唯一的团队。
computed: {
teams() {
return this.trackers.reduce((teams, tracker) => {
if (teams.find(team => team.team_id === tracker.team.team_id) === undefined) {
teams.push(tracker.team);
}
return teams;
}, []);
}
}
然后在模板中使用计算所得的属性。
<div v-for="team in teams" :key="team.team_id">
<div>{{team.team_name}}</div>
</div>
如果您需要与团队相关联的跟踪器信息,请为唯一的跟踪器创建一个计算属性。