Vue.js only show objects with a unique property

Question

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

Stephen Thomas · Accepted Answer · 2019-02-02 00:37:12Z

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.

answered Feb 2, 2019 at 0:37

Stephen Thomas

14.1k2 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

Thank you, with a little tweaking (due to me not showing all the code in the question) this worked.

Jason Over a year ago

Hey @StephenThomas I ran into more trouble and was hoping you could take a look. here is the thread: stackoverflow.com/questions/54494341/…

Collectives™ on Stack Overflow

Vue.js only show objects with a unique property

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related