Я столкнулся с проблемой.@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>
Как всегда, любая помощь очень ценится!