CMS tabs are used to render collection lists inside interactive tabs. They require combining many techniques such as loops, conditional rendering and data binding to get working correctly.
<ul class="tab-list inline-flex gap-2 mb-3" role="tablist">
<template v-for="(groupedItems, groupedBy, groupedByIndex) in careers.groupBy(groupByProp.bind(null, 'category'))">
<li role="presentation">
<button class="btn btn-primary" v-bind:class="{'btn-subtle': groupedByIndex > 0}" data-toggle="pill" type="button" role="tab" v-bind:aria-controls="groupedItems[0].categoryItem.slug" v-bind:aria-selected="groupedByIndex === 0" v-html="groupedItems[0].categoryItem.name"></button>
</li>
</template>
</ul>
<div class="tab-content" role="tabcontent">
<template v-for="(groupedItems, groupedBy, groupedByIndex) in careers.groupBy(groupByProp.bind(null, 'category'))">
<div class="tab-pane" v-bind:class="{'hidden': groupedByIndex > 0}" role="tabpanel" v-bind:aria-labelledby="groupedItems[0].categoryItem.slug">
<h2 v-html="groupedItems[0].categoryItem.name"></h2>
<div class="row">
<template v-for="job in groupedItems">
<div class="col lg:w-4/12">
<p v-html="job.name"></p>
<p v-html="job.locationItem.name"></p>
</div>
</template>
</div>
</div>
</template>
</div>