javascript - 我可以让一个属性在 vue v-for 中只出现一次吗
问题描述
我有很多人与相关团队。我想显示记录中的所有人,但我只想显示他们的团队名称一次。
意思是,如果 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 文件中执行吗?
编辑以显示更多非连续数据
更新:正如法比奥所指出的,除非团队的顺序首先在输出中按顺序排列,否则上述场景没有多大意义。所以他的回答是正确的。
解决方案
这可能是一个解决方案:
<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>
推荐阅读
- reactjs - axios GET 请求中超出 rangeerror 最大调用堆栈大小
- html - 使用 beautifulsoup 和 selenium 抓取多页网站返回空字符串列表
- android - 在 MPAndroidCharts 中将绘制值标签值从 float 更改为 int
- dotnetnuke - 如何在 2sxc 中设置跨应用实体关系
- codeigniter - 在 CodeIgniter 4 中处理多个视图控制器
- typescript - 在打字稿中,泛型函数可以返回扩展的泛型类型吗?
- github - git 命令/推送到一个新的仓库
- firebase - 没有为“UserCredential”类型定义吸气剂“uid”
- rust - 在带有异步函数的 trait 实现中使用宏
- maven - Maven 发布插件 -DscmCommentPrefix Azure Devops