I've hit a roadblock in my project. @StephenThomas kindly assisted me with this issue: Vue.js only show objects with a unique property but I still need to make some adjustments.
My current task involves creating a leaderboard for a game using Firestore. There's a collection called "leaderboard" that stores all the teams' scores. Each team has a start time, and every time there's an entry made for a team, the difference in time from the start to the present is stored in a property named "diff." Furthermore, all entries are timestamped.
Every team ends up having multiple entries in the "leaderboard" collection.
The goal is to display only the most recent entry for each team. Here's a snippet of what a few entries in the "leaderboard" collection look like:
step: "1"
diff: 6270
team: "1"
timestamp: 1549117702442
step: "1"
diff: 31704
team: "2"
timestamp: 1549118713605
step: "2"
diff: 30302
team: "1"
timestamp: 1549118713605
Stephen guided me through creating a computed property to filter out duplicate entries and show only one per team. However, now I face a new challenge where it doesn't display the most recent entry. For instance, in the example above, Team #1 shows Step #1 when it should actually display the results of Step #2.
Below is the computed property:
computed: {
teams() {
return this.trackers.reduce((teams, tracker) => {
if (teams.find(team => team.info.team_id === tracker.team.info.team_id) === undefined) {
teams.push(tracker.team);
teams.sort(function(a, b){
return a.tracker.diff-b.tracker.diff
})
}
return teams;
}, []);
}
},
And here is the generated HTML:
<v-list-tile v-for="(team, objKey) in teams" :key="objKey" avatar>
<v-list-tile-action >{{ objKey +1 }}</v-list-tile-action >
<v-card-title class="text-sm-left">
<v-list-tile-title v-text="team.info.team_name"></v-list-tile-title>
<v-list-tile-sub-title>{{team.tracker.diff | moment}}</v-list-tile-sub-title>
</v-card-title>
</v-list-tile>
Any assistance on this issue would be highly appreciated!