Vuejs2 带起始字母的Vue独立品牌

这是我想要的结果，希望它以起始字母分组

这是数据

{
     { "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" }
}

---

只需使用计算机对项目进行排序/分组即可：

Vue.component（“SingleItem”{
道具：['item']，
模板：`
{{item.name}
`
})
组件（“项目组”{
道具：['group'，'char']，
模板：`
{{char}


`
})
新Vue({
el:“应用程序”，
数据（）{
返回{
项目：[{
“id”：“61”，
“名称”：“1028视觉治疗”，
“鼻涕虫”：“1028视觉治疗”，
“\uuuu typename”：“品牌”
},
{
“id”：“51”，
“名称”：“3W诊所”，
“slug”：“3w诊所”，
“\uuuu typename”：“品牌”
},
{
“id”：“128”，
“名称”：“A.按物料清单”，
“slug”：“一个一个bom表”，
“\uuuu typename”：“品牌”
},
{
“id”：“96”，
“名称”：“已激活”，
“slug”：“actimed”，
“\uuuu typename”：“品牌”
},
{
“id”：“123”，
“名字”：“永远纯洁”，
“鼻涕虫”：“永远保持纯洁”，
“\uuuu typename”：“品牌”
},
{
“id”：“28”，
“名称”：“AMPM”，
“slug”：“ampm”，
“\uuuu typename”：“品牌”
},
{
“id”：“3”，
“名称”：“天使钥匙”，
“子弹”：“天使钥匙”，
“\uuuu typename”：“品牌”
},
{
“id”：“99”，
“名字”：“安妮之路”，
“鼻涕虫”：“安妮之路”，
“\uuuu typename”：“品牌”
},
{
“id”：“67”，
“名称”：“四月皮肤”，
“鼻涕虫”：“四月的皮肤”，
“\uuuu typename”：“品牌”
},
{
“id”：“126”，
“名称”：“极光D.”，
“鼻涕虫”：“极光-d”，
“\uuuu typename”：“品牌”
},
{
“id”：“124”，
“名称”：“Y轴”，
“段塞”：“y轴”，
“\uuuu typename”：“品牌”
},
],
}
},
计算：{
itemsGroupedByFirstChar（）{
返回此.items.reduce（（a，c）=>{
如果（a[c.name.charAt（0）]==“未定义”）a[c.name.charAt（0）]=[]
a[c.name.charAt（0）].push（c）
归还
}, {})
}
},
模板：`
`
})

.d-grid{
显示：网格；
网格模板列：重复（4，1fr）；
}
.单项{
填充：8px 16px；
}