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.
Then use the computed property in your template.
If you need the tracker information associated with the team, create a computed property for unique trackers instead.