Vue.js показывает только объекты с уникальным свойством - PullRequest
Новая
       35

Vue.js показывает только объекты с уникальным свойством

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

Я строю таблицу лидеров.У меня есть коллекция лидеров.Есть несколько записей от одной команды.Я хотел бы показать только одну запись на команду (самая последняя желательно).Я использую Firestore для базы данных.

Мой HTML выглядит так.(Я сократил код для простоты) 

<div v-for="tracker in trackers" :key="tracker.id">
    <div>{{tracker.team.team_name}}</div>
</div>

Если я добавлю это {{ tracker }} в HTML, это то, что выделяет один трекер 

{
  "team": {
    "bio": "<div><!--block-->This is Team One's Bio</div>",
    "fullPath": "avatars/XXXXXX.jpg",
    "team_id": "1",
    "team_name": "Team One",
    "url": "XXXXXXX",
    "id": "XXXXXXX"
  },
  "tracker": {
    "clue": "2",
    "code": "23456",
    "diff": 5269841,
    "team": "1"
  }
}

У меня несколько команд.Я бы хотел показывать только один трекер на "team", поэтому в основном группируем по "teams"

Любая помощь очень ценится

1 Ответ

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

Поскольку вы пометили вопрос computed-properties, вы на правильном пути.Просто создайте вычисляемое свойство, которое ограничивает трекеры уникальными командами. 

computed: {
    teams() {
        return this.trackers.reduce((teams, tracker) => {
            if (teams.find(team => team.team_id === tracker.team.team_id) === undefined) {
                teams.push(tracker.team);
            }
            return teams;
        }, []);
    }
}

Затем используйте вычисляемое свойство в своем шаблоне. 

<div v-for="team in teams" :key="team.team_id">
    <div>{{team.team_name}}</div>
</div>

Если вам нужна информация трекера, связанная с командой, вместо этого создайте вычисляемое свойство для уникальных трекеров.

...