Vue.js Show most recent unique entries

问题

I have run into a bit of a snag. @StephenThomas graciously helped me with this issue: Vue.js only show objects with a unique property but I need to tweak it a bit more.

I am creating a leaderboard for a game. I am using Firestore and I have a collection titled "leaderboard" that keeps all the teams scores. The teams have a start time. Next every time an entry is made for that team the difference in time from the start to now is put in a property titled "diff". In addition, all entries are timestamped.

Each team ends up with multiple entries in the "leaderboard" collection.

I need to only show the most recent entry for each team. below is what a few entries in the "leaderboard" collection looks 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 helped me with the computed property to reduce the entries to only show one for each team but my new problem is it is not showing the most recent. Case in point. in the example above Team #1 displays with Step #1 when it should be displaying the results of Step #2

here 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 html generated:

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

As always, any help is greatly appreciated!

回答1:

A friend helped me find a solution...

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);
                } else {
                    let index = teams.findIndex(team => team.info.team_id === tracker.team.info.team_id);
                    if (tracker.team.tracker.timestamp > teams[index].tracker.timestamp) {
                        teams[index] = tracker.team;
                    }
                }
                teams.sort(function(a, b){
                    return a.tracker.diff-b.tracker.diff
                })
                return teams;
            }, []);
        }

来源：https://stackoverflow.com/questions/54494341/vue-js-show-most-recent-unique-entries

标签

javascript

Vue.js

vuejs2

vue-component

computed-properties