我正在尝试使用Vue JS从ajax调用中分组并显示团队下的姓名列表。
这是原始对象:
0 { name: Bob Sinclair
teamname: Francs
email: bob.sinclair@test.com
job: Product Manager
type: Team Member
}
1 { name: Neil Jones
teamname: Dream Team
email: neil.jones@test.com
job: Developer
type: Team Member
}
2 { name: Jim Cairns
teamname: Dream Team
email: jim.cairns@test.com
job: Developer
type: Team Member
}
我已经使用以下功能按“团队名称”对数据进行了分组:
function groupBy(collection, property) {
var i = 0, val, index,
values = [], result = [];
for (; i < collection.length; i++) {
val = collection[i][property];
index = values.indexOf(val);
if (index > -1)
result[index].push(collection[i]);
else {
values.push(val);
result.push([collection[i]]);
}
}
return result;
}
这在控制台中提供了以下输出:
0 { 0 { name: Bob Sinclair
teamname: Francs
email: bob.sinclair@test.com
job: Product Manager
type: Team Member
}
1 { 0 { name: Neil Jones
teamname: Dream Team
email: neil.jones@test.com
job: Developer
type: Team Member
}
1 { name: Jim Cairns
teamname: Dream Team
email: jim.cairns@test.com
job: Developer
type: Team Member
}
我的问题是使用“ v-for”来显示它。
我希望每个“团队名称”都有一张卡片,下面有一个“名称”列表。
提前致谢!
最佳答案
假设您将分组数据称为团队:
然后,您的模板代码应为:
<div class="team" v-for="team in teams" :key="team[0].teamname">
<p> {{ team[0].teamname }} </p>
<div class="teammates" v-for="teammate in team" :key="teammate.name">
{{ teammate.name }}
// other infos for teammate
</div>
</div>