Vue.js 只显示具有唯一属性的对象 [英] Vue.js only show objects with a unique property
问题描述
我正在建立一个排行榜.我有一个领导者的集合.有多个来自同一团队的参赛作品.我只想显示每个团队的一个条目(最好是最近的).我正在为数据库使用 Firestore.
我的 html 看起来像这样.(为了简单起见,我缩短了代码)
<div>{{tracker.team.team_name}}</div>
如果我将这个 {{ tracker }}
添加到 HTML,这就是一个跟踪器分离出来的内容
<代码>{团队": {"bio": "This is Team One's Bio","fullPath": "头像/XXXXXX.jpg","team_id": "1","team_name": "第一队","url": "XXXXXXX","id": "XXXXXXX"},跟踪器":{"线索": "2",代码":23456",差异":5269841,团队":1"}}
我有多个团队.我只想为每个 "team"
显示一个跟踪器,所以基本上按 "teams"
非常感谢任何帮助
既然你标记了计算属性问题,你就走对了.只需创建一个计算属性,将跟踪器限制为独特的团队.
计算:{团队(){返回 this.trackers.reduce((teams, tracker) => {if (teams.find(team => team.team_id === tracker.team.team_id) === 未定义) {团队.推(跟踪器.团队);}归队;}, []);}}
然后在模板中使用计算属性.
<div>{{team.team_name}}</div>
如果您需要与团队关联的跟踪器信息,请改为为唯一跟踪器创建一个计算属性.
I am building a Leaderboard. I have a collection of leaders. There are multiple entries from the same teams. I would like to only show one entry per team (most recent preferably). I am using Firestore for the database.
My html looks like this. (I shortened the code for simplicity)
<div v-for="tracker in trackers" :key="tracker.id">
<div>{{tracker.team.team_name}}</div>
</div>
If I add this {{ tracker }}
to the HTML this is what one tracker splits out
{
"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"
}
}
I have multiple teams. I would like to only show one tracker per "team"
so basically group by "teams"
Any help is much appreciated
Since you tagged the question computed-properties, you're on the right track. Just create a computed property that limits the trackers to unique teams.
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;
}, []);
}
}
Then use the computed property in your template.
<div v-for="team in teams" :key="team.team_id">
<div>{{team.team_name}}</div>
</div>
If you need the tracker information associated with the team, create a computed property for unique trackers instead.
这篇关于Vue.js 只显示具有唯一属性的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!