我可以让一个属性在 vue v-for 中只出现一次吗答案

【问题标题】：Can I make an attribute appear only once in a vue v-for我可以让一个属性在 vue v-for 中只出现一次吗
【发布时间】：2019-03-29 16:51:45
【问题描述】：

我有很多人与相关团队。我想显示记录中的所有人，但我只想显示他们的团队名称一次。

意思是，如果 v-for 循环遇到这个特定的团队名称，它应该将它放在一个新的临时数组中以表示它应该是唯一的，然后当它再次遇到该团队名称时，通过该临时数组检查它并阻止它再次显示。

示例 HTML 代码：

<div id="a-list">
     <div v-for="person in people">{{person.Name}}, {{person.Team}}</div>
</div>

示例 Vue 代码：

var crew = new Vue({
el: "#a-list",
data: {
people:
  [ { "Name": "Richard","Team":"DMS"}, { "Name": "Mark","Team":"VV"}, { "Name": "Steve","Team":"VV"}, {"Name":"Koji","Team":"MZ"}, {"Name":"Jamie","Team":"VV"} ]
  }
});

预期输出：

Richard, DMS
Mark, VV
Steve, 
Koji, MZ
Jaimie,

这可以直接从 v-for 循环而不是在 JS 文件中执行吗？

已编辑以显示更多非连续数据

更新：正如 Fabio 所指出的，除非团队的顺序首先在输出中按顺序排列，否则上述场景没有多大意义。所以他的答案是正确的。

【问题讨论】：

也许你想改进数组结构？我认为，如果您将人员存储在以公司名称为键的数组中，那不是更好吗？像这样的东西：人：[DMS：{“理查德”}，VV：{“马克”，“史蒂夫”，“杰米”}，MZ：{“Koji”}，]
有了这个输出，我可以认为 Jaimie 在 MZ 团队，对吗？
不，Jamie 在 VV 团队。但是考虑到你所说的数据如果不是按团队排序就没有意义，那么我认为你是对的。

标签： javascript arrays vue.js

【解决方案1】：

这可能是一个解决方案：

<div id="a-list">
    <div v-for="(person,index) in people"> {{person.Name}}, {{ ((index == 0) || person.Team != people[index-1].Team) ? person.Team : '' }}</div>
</div>

【讨论】：

哦，对不起。我认为这不是一个好的解决方案。因为这只检查 person.Team 是否彼此相邻。如果重新排列顺序，那么属性仍然会重复。
是的。理想情况下，我想隐藏团队出现在数组中的任何位置。
我可以认为您的回答是正确的，因为无论如何我确实需要按团队重新排列它们。感谢收获。很抱歉让事情变得复杂。