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

Support
1

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

HTML:

<div>
    <p class="text-xl text-black">Work Flow(Beta)</p>
    <hr><br>
</div>
<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>
            <i class="pl-2 fa fa-2x fa-square-o" v-if="!label.boolean" v-on:click.stop="namedAction('toggleFlow',{row:label})">
            </i>
        </span>
    </li>
</ul>
</div>

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

image

Delfs:
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.

image

Delfs:
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"

reference: https://lodash.com/docs/4.17.15#groupBy

Nick Kurz:
that makes sense…thanks @Delfs