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

问题描述 投票:0回答:1

我遇到了一个有点障碍的。 @StephenThomas慷慨地帮助我这个问题:Vue.js only show objects with a unique property但我需要调整它多一点。

我创建了一个游戏排行榜。我使用公司的FireStore,我已经收集标题,保持所有球队的比分“领先”。该团队拥有的开始时间。接下来的每一个条目从现在开始为球队取得从开始的时间差的时间放在标题为“差异”的属性。此外,所有参赛作品都带有时间戳。

每队在“排行榜”收集多个条目结束。

我只需要显示最近每队条目。下面就是在“排行榜”收集几个条目是这样的:

step: "1"
diff: 6270
team: "1"
timestamp: 1549117702442

step: "1"
diff: 31704
team: "2"
timestamp: 1549118713605

step: "2"
diff: 30302
team: "1"
timestamp: 1549118713605

斯蒂芬帮我计算性能,以减少项目只显示为每个球队,但我的新的问题是它没有显示最近的。典型的例子。在上述组#实施例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>

与往常一样,任何帮助是非常感谢!

javascript vue.js vuejs2 vue-component computed-properties
1个回答
0
投票

朋友帮我想想办法......

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;
            }, []);
        }
© www.soinside.com 2019 - 2024. All rights reserved.