你如何遍历数组并创建包含类别的词汇表列表

Question

我有一个包含定义列表的数组。使用 Vue.js，遍历该数组并创建以字母作为类别的词汇表列表的最佳方法是什么？

期望输出:

一个

aterm：aterm 的定义

B

Bterm：bterm的定义

C

cterm：cterm 的定义
cterm：cterm 的定义
cterm：cterm 的定义

是

Yterm：yterm 的定义
Yterm：yterm 的定义

Z

Zterm：zterm 的定义

<div id="app" class="container">
  <div v-for="(item, index) in fields" :key="index">
    <span>{{ item.Term.charAt(0) }}
    <h3>{{ item.Term }}</h3>
    <p>{{ item.Definition }}</p>
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Parent',
    fields: [
      { Term: 'Aterm', Definition: 'A definition for aterm' },
      { Term: 'Bterm', Definition: 'A definition for bterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Mterm', Definition: 'A definition for mterm' },
      { Term: 'Yterm', Definition: 'A definition for yterm' },
      { Term: 'Yterm', Definition: 'A definition for yterm' },
      { Term: 'Zterm', Definition: 'A definition for zterm' }
    ]
  },
  methods: {
    // do something
  }
})
</script>

Answer 1

在 this.fields[] 上创建 computed property that groups the fields alphabetically by letter (using Array.prototype.reduce()):

new Vue({
  computed: {
    fieldsByLetter() {
      const groups = this.fields.reduce((p, field) => {
        const letter = field.Term.at(0).toUpperCase()  // use uppercase first letter
        p[letter] ??= []      // create array for this letter if needed
        p[letter].push(field) // add field to array
        return p              // return updated object
      }, {})

      // alphabetize fields by Term
      Object.values(groups).forEach(fields => fields.sort((a, b) => a.Term.localeCompare(b.Term)))

      return groups
    }
  },
})

然后迭代计算的 object with v-for，用它自己的 v-for 渲染对象的 fields[]，<li> 中的每个项目以获得所需的输出：

<div id="app" class="container">
  <div v-for="(fields, letter) in fieldsByLetter" :key="letter">
    <h3>{{ letter }}</h3>
    <ul>
      <li v-for="item in fields" :key="item.Term">
        <span>{{ item.Term }}:</span>
        <span>{{ item.Definition }}</span>
      </li>
    </ul>
  </div>
</div>

demo

Answer 2

这是我能提供的最简单的方法。我会受益lodash解决问题

首先，您需要在脚本代码的顶部导入lodash。根据我的经验，它是一个操作数据结构的强大工具。

import * as _ from "https://cdn.skypack.dev/lodash@4.17.21";

您需要添加此代码：

methods: {
    sorting(item) {
      return _.mapValues(
        _.groupBy(item, function (e) {
          return e.Term;
        })
      );
    },
  },
computed: {
    terms() {
      return this.sorting(this.fields);
    },
}

在这里，我创建了一个计算变量来操纵名为 fields 的变量，方法是调用实现 的 sorting 函数lodash。我映射了值并根据数组中的 Term 字段对它们进行了分组。

然后，你需要重构html代码：

<div id="app" class="container">
  <div v-for="(term, key, index) in terms" :key="index"> <!-- Replace fields with the computed variable terms, and access the keys -->
   <h4>{{ key.charAt(0) }}</h4> <!-- Call the key with the first Index -->
   <ul> <!-- Add this -->
     <li v-for="item in fields" :key="item.Term">
       <span>{{ item.Term }}:</span>
       <span>{{ item.Definition }}</span>
     </li>
   </ul>
  </div>
</div>

代码笔：https://codepen.io/auliaamir/pen/GROVJvr

你如何遍历数组并创建包含类别的词汇表列表

How do you loop thru array and create glossary list with categories

javascript

arrays

loops

vue.js

vuejs2