Как сгруппировать элементы в зависимости от свойства данных в цикле v-for?

Question

Я хотел бы сгруппировать элементы в зависимости от свойства "group" в цикле v-for. Эти данные получены из API. Как я мог решить это?

Вот что я хочу:

Это мой код: https://jsfiddle.net/dowhiledo/d7gfr1oy/5/

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      }
    ]
  }
});

li {
  border: 1px solid blue
}

.group {
  border: 4px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>



<div id="example">
  <ul>
    <li v-for="p in people">
      {{ p.group }} - {{ p.name }}
    </li>
  </ul>
</div>

Answer 1

Это идеальный вариант использования для вычисляемого свойства.

Используйте Array.reduce, чтобы просмотреть все элементы массива и «накапливать» их в массиве группы.

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

Полный рабочий пример в вашей обновленной / разветвленной скрипке: https://jsfiddle.net/9xfpkL0b/

Answer 2

Чтобы получить этот результат, вы должны делитель ваш массив на group , тогда вы можете сделать цикл в html в соответствии с желаемыми группами тезисов.

Попробуйте следующий код, чтобы получить результат:

HTML

<div id="example">
    <template v-for="group in peopleGroup">
       <ul>
           <li v-for=" people in group">
              {{ people.group }} - {{ people.name }}
           </li>
        </ul>
    </template>
</div>

VueJS - скрипт

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;
    }
  }
});

Вот код: http://jsfiddle.net/qb9dmhy2/20/