Go back to Examples

Group by collection list

CMS - Advanced

The groupBy method allows you to group a collection list by a field. Inside a loop it returns the items, key and index of the grouped by field. The items can then be looped over as a nested collection.

                <template v-for="(groupedItems, groupedBy, groupedByIndex) in careers.groupBy(groupByProp.bind(null, 'category'))">
    <div>
        <h2 v-html="groupedItems[0].categoryItem.name"></h2>
        <p v-html="groupedByIndex"></p>
        <template v-for="job in groupedItems">
            <p v-html="job.name"></p>
        </template>
    </div>
</template>