你如何遍歷數組並創建包含類別的詞匯表列表

Question

我有一個包含定義列表的數組。 使用 Vue.js，遍歷該數組並創建以字母作為類別的詞匯表列表的最佳方法是什么？

期望 Output ：

一種

• Aterm：一個term的定義

乙

• 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[]上使用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
    }
  },
})

然后用 v-for 迭代計算出的v-for ，用它自己的v-for渲染對象的fields[] ，以及<li>中的每個項目以獲得所需的 output：

<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>

演示

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);
    },
}

在這里，我創建了一個計算變量來通過調用實現lodash的排序function 來操作名為fields的變量。 我映射了值並根據數組中的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