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

Я строю таблицу лидеров. У меня есть коллекция лидеров. Есть несколько заявок от одних и тех же команд. Я хотел бы показать только одну запись на команду (предпочтительно самую последнюю). Я использую 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"

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


javascript computed-properties vuejs2 vue-component
person Jason    schedule 02.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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>

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

person Stephen Thomas    schedule 02.02.2019
comment
Спасибо, с небольшой настройкой (из-за того, что я не показывал весь код в вопросе) это сработало. - person Jason; 02.02.2019
comment
Привет, @StephenThomas, я столкнулся с большими проблемами и надеялся, что ты сможешь взглянуть. вот ветка: stackoverflow.com/questions/54494341/ - person Jason; 02.02.2019