您如何回圈遍歷陣列并創建帶有類別的詞匯表串列

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

期望的輸出：

一種

• aterm：aterm的定義

乙

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

uj5u.com熱心網友回復：

創建一個計算屬性，按字母順序對欄位進行分組（使用Array.prototype.reduce()on this.fields[]）：

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-forfields[]，用它自己的 渲染物件v-for，以及 a 中的每個專案<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>

演示

uj5u.com熱心網友回復：

這是我能提供的最簡單的方法。我將幫助lodash解決問題。

首先，您需要在腳本代碼的頂部匯入lodash 。它是根據我的經驗操作資料結構的強大工具。

import * as _ from "https://cdn.skypack.dev/[email protected]";

您需要添加以下代碼：

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

在這里，我創建了一個計算變數， 通過呼叫實作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

標籤：javascript 数组 Vue.js 循环 Vuejs2

上一篇：通過對所有組合中每個資料幀中的行求和來填充串列串列

下一篇：R回圈直到條件匹配，然后繼續