javascript - Vue.js - 为按字母顺序排序的列表创建字母标题

Question

我正在迭代以下类型的 JSON 对象:

"entries": [{
    "first_name": "Brigitte",
    "last_name": "Bardot",
    "country": "Paris, France",
    "profession": "Actress"
  },
  {
    "first_name": "Apollo",
    "last_name": "AA",
    "country": "Witten, Germany",
    "profession": "Writer"
  }]

使用 v-for 和 lodash 我有一个按字母顺序排列的这些条目的列表:

<div v-for="user in orderedUsers" :key='user' class="user">
<p>{{ user.first_name }} {{ user.last_name }} ({{ user.country }}), {{ user.profession }}</p> 
</div>

我想创建一个包含姓氏第一个字母的标题，以便按字母顺序对条目进行分组:

A

Apollo

B

芭铎

等等..

我用来对条目进行排序的函数如下:

computed: {
      orderedUsers: function () {
        return orderBy(this.text[0].entries, 'last_name')
      }
    }

有什么简单有效的方法来实现这一目标吗？

Answer 1

按姓氏对条目进行排序，并按每个用户的第一个字母进行分组。使用 flatMap 迭代项目，并添加键(姓氏)字母。

在 vue 中使用 v-if (该项目是一个字符串)和 v-else 来决定渲染项目或标题。

const { flow, orderBy, groupBy, flatMap, get } = _
const entries = [{"first_name":"Brigitte","last_name":"Bardot","country":"Paris, France","profession":"Actress"},{"first_name":"Apollo","last_name":"AA","country":"Witten, Germany","profession":"Writer"}]
  
const groupItems = flow([
  arr => orderBy(arr, 'last_name'),
  arr => groupBy(arr, o => get(o, 'last_name[0]', '').toUpperCase()),
  groups => flatMap(groups, (v, k) => [
    k,
    ...v
  ])
])

new Vue({
  el: '#app',
  data: { orderedUsers: groupItems(entries) }
})

/** hide the annoying vue production messages **/
.as-console-wrapper {
  display: none !important;
}

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1b18082d5f4358435c5e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<div id="app">
  <div v-for="item in orderedUsers">
    <h2 v-if="typeof item === 'string'">
      {{ item }}
    </h2>
      <p v-else>{{ item.first_name }} {{ item.last_name }} ({{ item.country }}), {{ item.profession }}</p> 
  </div>
</div>