Vue.js 联系人列表，需要在信件类别中显示每个联系人

我有一个联系人列表，如下所示：

contacts = [{ name: 'Albert' }, { name:'Bernard' }, { name: 'Bob'}, { name: 'Robert' }];

考虑到联系人已按字母顺序排列，您将如何在按字母分类的列表中显示每个联系人，如下所示：

A

• 阿尔伯特

B

• 伯纳德
• 鲍勃

R

• 罗伯特

在我的模板中，我已经知道如何显示我的联系人

<template v-for="contact in contacts">
 <li>{{ contact.name }}</li>
<template>

{{contact.name}

但我不知道如何对这封信进行分类

---

感谢您的帮助

您必须按照其他数组中的第一个字母对这些项目进行分组，并相应地推送这些项目

可以使用计算属性执行此操作，以便数据始终自动更新

见：

var contacts=[{name:'Albert'}，{name:'Amanda'}，{name:'Bernard'}，{name:'Bob'}，{name:'Robert'}]；
var app=新的Vue({
el:“#联系人列表”，
数据：{
联系人：联系人
},
计算：{
groupedContacts:function（）{
变量组={}；
//循环每个触点
this.contacts.forEach（函数（contact）{
//获取联系人姓名中联系人的第一个字符
var firstLetter=contact.name.charAt（0）；
//检查“groups”对象是否包含联系人第一个字母的键
如果（！组[第一个字母]）{
//如果没有，则将其创建为空数组。
组[第一个字母]=[]；
}
var条目=组[第一个字母]；
//将联系人添加到组中
进入。推（接触）；
});
返回组；
}
}
});
console.log（app.groupedContacts）



{{key}}


{{contact.name}




我会使用类库和计算属性：

从“lodash”导入
导出默认值{
数据（）{
返回{
联系人：[{name:'Albert'}，{name:'Bernard'}，{name:'Bob'}，{name:'Robert'}]
}
},
计算：{
分组（）{
return\uu.groupBy（this.contacts，（item）=>{
返回项.name.charAt（0）
})
}
}
}

然后在模板中：

{{key}}

{{contact.name}

我通过使用返回筛选列表的方法解决了这个问题。首先，这是我的前端：

const-app=新的Vue({
el:“#应用程序”，
数据：{
联系人：[{
姓名：“阿尔伯特”
}, {
名字：“伯纳德”
}, {
姓名：“鲍勃”
}, {
名字：“罗伯特”
}],
字母：“abcdefghijklmnopqrstuvxyz”。拆分（“”）
},
方法：{
字母触点：功能（l）{
返回此.contacts.filter（i=>{
返回i.name.toLowerCase（）.indexOf（l.toLowerCase（））==0；
});
}
}
})

{{字母}}

{{contact.name}

你能告诉我@Hammerbot如何根据脂肪族指数对数组进行排序吗？