Javascript 如何根据v-for循环中的数据属性对元素进行分组？

我想根据v-for循环中的“group”属性对元素进行分组。此数据是从API获取的。 我怎样才能解决这个问题

这就是我想要的：

这是我的代码：

var example1=新的Vue({
el:“#示例”，
数据：{
人员：[//按组排序
{name:'Mary'，组：1}，
{name:'John'，组：1}，
{姓名：'Peter'，组别：1}，
{姓名：'Freddie'，组别：2}，
{姓名：'保罗'，组别：2}，
{姓名：'Alfred'，组别：5}，
{姓名：'George'，组别：5}
]
}
});
li{
边框：1px纯蓝
}
.组{
边框：4px纯红
}



{{p.group}}-{p.name}


为了得到这个结果，您必须将数组按组进行分割，然后可以根据需要的组在html中进行循环

请尝试以下代码以获得结果：

HTML

代码如下：
这是计算属性的完美用例

使用
Array.reduce
检查所有数组元素并将它们“累积”到一个组数组中

computed: {
groups() {
  return this.people.reduce((groups, item) => {
     const g = item.group
     groups[g] = groups[g] || []
     groups[g].push(item)
     return groups
    }, {})
  }
}

更新/分叉提琴中的完整工作示例：
您可以创建一个数组（或对象），该数组将包含表示人群的数组
[[{name:'Marry'}，{name:'John'}]，{name:'Freddie'}，…]，]
您需要循环初始数组以正确地对它们进行分组。然后循环遍历每个数组组的数组/对象，循环遍历该数组组。
var example1 = new Vue({
  el: '#example',
  data: {
    people: [ // ordered by group
      {        name: 'Mary',        group: 1      },
      {        name: 'John',        group: 1      },
      {        name: 'Peter',       group: 1      },
      {        name: 'Freddie',     group: 2      },
      {        name: 'Paul',        group: 2      },
      {        name: 'Alfred',      group: 5      },
      {        name: 'George',      group: 5      }
    ],
    peopleGroup: {}
  },
  mounted(){
    this.peopleGroup = this.parsePeopleGroup( this.people );
  },
  methods: {
    parsePeopleGroup( arrayPeople ) {
        let newArray = {};
        arrayPeople.map( people => {
        if( !newArray[ people.group ] )
            newArray[people.group] = []

        newArray[people.group].push( people );
      })
      return newArray;
    }
  }
});

computed: {
groups() {
  return this.people.reduce((groups, item) => {
     const g = item.group
     groups[g] = groups[g] || []
     groups[g].push(item)
     return groups
    }, {})
  }
}