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

Question

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

提前致谢!

Answer 1

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

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

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