Vue.js Показать последние уникальные записи - PullRequest
0 голосов
/ 02 февраля 2019

Я столкнулся с проблемой.@StephenThomas любезно помог мне с этой проблемой: Vue.js показывает только объекты с уникальным свойством , но мне нужно немного подправить его.

Я создаю таблицу лидеров для игры.Я использую 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

Стивен помог мне с вычисляемым свойством уменьшить количество записей, чтобы показать только одну для каждой команды, но моя новая проблема заключается в том, что это не такпоказывая самые последние.Дело в точке.в приведенном выше примере команда № 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>

Как всегда, любая помощь очень ценится!

1 Ответ

0 голосов
/ 02 февраля 2019

Друг помог мне найти решение ...

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;
            }, []);
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...