时间戳

首页 > 解决方案 > 使用 Vue JS 显示分组的嵌套数组

javascript - 使用 Vue JS 显示分组的嵌套数组

问题描述

我正在尝试使用 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”来显示它。我希望能够为每个“团队名称”制作一张卡片，下面有一个“名称”列表。

提前致谢！

标签： javascriptarraysvue.js

解决方案

假设您的分组数据称为团队：

那么你的模板代码应该是：

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

推荐阅读