我可以在vue v-for中仅使属性出现一次吗

时间:2018-10-25 06:54:04

标签: javascript arrays vue.js

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

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

1 个答案:

答案 0 :(得分: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>