Anyone know how to group a list generated with v-f

Nick Kurz:
Anyone know how to group a list generated with v-for?


    <p class="text-xl text-black">Work Flow(Beta)</p>
<div class="flex">
<ul class="list-group" v-for="label in model.order.workflow">
    <li class="list-group-item">{{label.groupLabel}}<span>
            <h2 class="pl-2 pb-2">{{label.label}}</h2>
            <i class="pl-2 fa fa-2x fa-check-square-o" v-if="label.boolean" v-on:click.stop="namedAction('toggleFlow',{row:label})">
            <i class="pl-2 fa fa-2x fa-square-o" v-if="!label.boolean" v-on:click.stop="namedAction('toggleFlow',{row:label})">

Current Render(yellow indicates desired group…“groupLabel” key)


There are a few ideas for groups;
Do you mean sort by groupLabel, or create visual groups ( Like a sub summary)?

Nick Kurz:
Just a visual grouping.

Nick Kurz:
Here is a better image…similar colors group under a single label.


for a visual grouping you need to group the items first ( in JS )
to visually separate the groups, you will need an outer v-for (groups) and an inner one (items )

You can group the array of items with lodash groupBy easily like this:

_.groupBy(model.theItems, 'groupLabel');

use direct in the outer v-for like this 

v-for="group in _.groupBy(model.theItems, 'groupLabel');"

and in inner loop:

    v-for="item in group"


Nick Kurz:
that makes sense…thanks @Delfs