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

Posted 2023-02-23

【中文标题】Vue.js 只显示具有唯一属性的对象

【英文标题】：Vue.js only show objects with a unique property

【发布时间】：2019-06-26 13:50:12

【问题描述】：

我正在建立一个排行榜。我有一群领袖。有来自同一个团队的多个条目。我想每个团队只显示一个条目（最好是最近的）。我正在为数据库使用 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】：

自从您标记了问题计算属性后，您就走在了正确的轨道上。只需创建一个计算属性，将跟踪器限制为唯一的团队。

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>

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

【讨论】：

谢谢，稍作调整（由于我没有显示问题中的所有代码）这有效。

嘿@StephenThomas 我遇到了更多麻烦，希望你能看看。这是线程：***.com/questions/54494341/…