Question

我正在建立排行榜。我有一群领导者。同一团队有多个参赛作品。我只想为每个团队显示一个条目（最好是最近的条目）。我正在为数据库使用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"分组

非常感谢您的帮助

Answer 1

由于您标记了问题compute-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>

如果您需要与团队相关联的跟踪器信息，请为唯一的跟踪器创建一个计算属性。

Vue.js仅显示具有唯一属性的对象

1 个答案: