Vue.js Only Show Objects With A Unique Property

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).

Solution 1:

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.