Question

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

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

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

A

阿尔伯特

乙

伯纳德
鲍勃

[R

罗伯特

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

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

但我不知道如何进行字母分类

感谢您的帮助

Answer 1

我会使用像lodash这样的库和计算属性：

import _ from 'lodash'

export default {
    data () {
        return {
            contacts: [{ name: 'Albert' }, { name:'Bernard' }, { name: 'Bob'}, { name: 'Robert' }]
        }
    },
    computed: {
        grouped () {
            return _.groupBy(this.contacts, (item) => {
                return item.name.charAt(0)
            })
        }
    }
}

然后在模板中：

<div v-for="(value, key) in grouped">
    <h2>{{ key }}</h2>
    <ul>
        <li v-for="contact in value">{{ contact.name }}</li>
    </ul>
</div>

Answer 2

我通过使用方法返回已过滤的列表来解决它。首先，这是我的前端：

const app = new Vue({
  el: '#app',
  data: {
    contacts: [{
      name: 'Albert'
    }, {
      name: 'Bernard'
    }, {
      name: 'Bob'
    }, {
      name: 'Robert'
    }],
    letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
  },
  methods: {
    alphaContacts: function(l) {
      return this.contacts.filter(i => {
        return i.name.toLowerCase().indexOf(l.toLowerCase()) === 0;
      });
    }
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.js"></script>
<div id="app">
  <div v-for="letter in letters">
    <h1>{{letter}}</h1>
    <ul>
      <li v-for="contact in alphaContacts(letter)">{{ contact.name }}</li>
    </ul>
  </div>
</div>

原谅糟糕的格式 - 永远不能在这里得到代码。 ;）这里有一个CodePen：https://codepen.io/cfjedimaster/pen/LdGEOr?editors=1011

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

2 个答案: