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

Question

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

意思是，如果 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 所指出的，除非首先在输出中按顺序排列团队的顺序，否则上述场景没有多大意义。所以他的回答是正确的。

Answer 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>