Vue separate brand with starting letter - vuejs2

Question

This is the result that i want, want it to separate into group with starting letter
Here is the data
{
{ "id": "61", "name": "1028 Visual Therapy", "slug": "1028-visual-therapy", "__typename": "Brand" }
{ "id": "51", "name": "3W Clinic", "slug": "3w-clinic", "__typename": "Brand" }
{ "id": "128", "name": "A. By BOM", "slug": "a-by-bom", "__typename": "Brand" }
{ "id": "96", "name": "ACTIMED", "slug": "actimed", "__typename": "Brand" }
{ "id": "123", "name": "Always be Pure", "slug": "always-be-pure", "__typename": "Brand" }
{ "id": "28", "name": "AMPM", "slug": "ampm", "__typename": "Brand" }
{ "id": "3", "name": "Angel Key", "slug": "angel-key", "__typename": "Brand" }
{ "id": "99", "name": "Annie's Way", "slug": "annies-way", "__typename": "Brand" }
{ "id": "67", "name": "APRIL SKIN", "slug": "april-skin", "__typename": "Brand" }
{ "id": "126", "name": "Aurora D.", "slug": "aurora-d", "__typename": "Brand" }
{ "id": "124", "name": "AXIS-Y", "slug": "axis-y", "__typename": "Brand" }
}

Answer 1

Just use a computed to sort/group the items however you want:
Vue.component("SingleItem", {
props: ['item'],
template: `
<div
class="single-item"
>
{{ item.name }}
</div>
`
})
Vue.component("ItemGroup", {
props: ['group', 'char'],
template: `
<div>
<strong>{{ char }}</strong><br />
<div
class="d-grid"
>
<single-item
v-for="item in group"
:item="item"
></single-item>
</div>
<hr />
</div>
`
})
new Vue({
el: "#app",
data() {
return {
items: [{
"id": "61",
"name": "1028 Visual Therapy",
"slug": "1028-visual-therapy",
"__typename": "Brand"
},
{
"id": "51",
"name": "3W Clinic",
"slug": "3w-clinic",
"__typename": "Brand"
},
{
"id": "128",
"name": "A. By BOM",
"slug": "a-by-bom",
"__typename": "Brand"
},
{
"id": "96",
"name": "ACTIMED",
"slug": "actimed",
"__typename": "Brand"
},
{
"id": "123",
"name": "Always be Pure",
"slug": "always-be-pure",
"__typename": "Brand"
},
{
"id": "28",
"name": "AMPM",
"slug": "ampm",
"__typename": "Brand"
},
{
"id": "3",
"name": "Angel Key",
"slug": "angel-key",
"__typename": "Brand"
},
{
"id": "99",
"name": "Annie's Way",
"slug": "annies-way",
"__typename": "Brand"
},
{
"id": "67",
"name": "APRIL SKIN",
"slug": "april-skin",
"__typename": "Brand"
},
{
"id": "126",
"name": "Aurora D.",
"slug": "aurora-d",
"__typename": "Brand"
},
{
"id": "124",
"name": "AXIS-Y",
"slug": "axis-y",
"__typename": "Brand"
},
],
}
},
computed: {
itemsGroupedByFirstChar() {
return this.items.reduce((a, c) => {
if (typeof a[c.name.charAt(0)] === "undefined") a[c.name.charAt(0)] = []
a[c.name.charAt(0)].push(c)
return a
}, {})
}
},
template: `
<div>
<item-group
v-for="(val, key, i) in itemsGroupedByFirstChar"
:key="'group-'+ key + '-' + i"
:group="val"
:char="key"
></item-group>
</div>
`
})
.d-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.single-item {
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>