Question

我遇到了一些麻烦。 @StephenThomas慷慨地帮助我解决了这个问题： Vue.js only show objects with a unique property，但我需要进行更多调整。

我正在为游戏创建排行榜。我正在使用Firestore，并且有一个标题为“排行榜”的收藏集，可以使所有团队得分。团队有一个开始时间。接下来，每次为该团队输入条目时，从开始到现在的时间差都会放入名为“ diff”的属性中。此外，所有条目都带有时间戳。

每个团队最终在“排行榜”集合中有多个条目。

我只需要显示每个团队的最新条目。下面是“排行榜”集合中的一些条目：

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步

这是计算出的属性：

    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显示最新的唯一条目

1 个答案: