Vue.js 显示最近的唯一条目 [英] Vue.js Show most recent unique entries

问题描述

我遇到了一些障碍.@StephenThomas 慷慨地帮助我解决了这个问题:Vue.js 仅显示具有唯一属性的对象 但我需要稍微调整一下.

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.

我正在为游戏创建排行榜.我正在使用 Firestore，我有一个名为排行榜"的集合，可以保存所有团队的分数.团队有一个开始时间.接下来，每次为该团队创建条目时，从开始到现在的时间差都会放入名为diff"的属性中.此外，所有条目都带有时间戳.

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

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

这里是计算属性:

    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>

一如既往，非常感谢任何帮助！

As always, any help is greatly appreciated!

推荐答案

一位朋友帮我找到了解决方案...

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

这篇关于Vue.js 显示最近的唯一条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！