Vue.js 显示最近的唯一条目

Question

我运行遇到了一些麻烦。 @StephenThomas 慷慨地帮助我解决了这个问题：但我需要稍微调整一下。

我正在为游戏创建排行榜。我正在使用 Firestore 并且我有一个名为 "leaderboard" 的 collection 来保存所有团队的分数。团队有开始时间。接下来，每次为该团队创建一个条目时，从开始到现在的时间差异都会放在标题为 "diff" 的属性中。此外，所有条目都有时间戳。

每个团队在 "leaderboard" collection 中都有多个条目。

我只需要显示每个团队的最新条目。下面是 "leaderboard" collection 中的一些条目的样子：

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 帮助我计算属性减少了每个团队只显示一个条目，但我的新问题是它没有显示最新的条目。举个例子。在上面的示例中，团队 #1 显示了步骤 #1，而它应该显示步骤 #2

的结果

这里是计算出来的属性:

    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;
            }, []);
        }
    },

这是生成的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>

一如既往，非常感谢您的帮助！

Answer 1

朋友帮我解决了...

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;
            }, []);
        }

Vue.js 显示最近的唯一条目

Vue.js Show most recent unique entries

javascript

vue.js

computed-properties

vue-component

vuejs2