如何在 Vue 中使用 v-for 显示分组项目？

Question

我有一个这样的数组：

// ...
data():{
    return{
        list: [
            { letter: "A", name: "Albert" },
            { letter: "A", name: "Archer" },
            { letter: "B", name: "Blade" },
            { letter: "B", name: "Birdie" },
        ]
    }
}

我想分组显示：

<template>
    <section>
        <div>A:</div>
        <div>Albert</div>
        <div>Archer</div>
    </section>
    <section>
        <div>B:</div>
        <div>Blade</div>
        <div>Birdie</div>
    </section>
</template>

如您所见，我想在第一次迭代时追加 <section> <div>{{letter}}:</div>，或者如果字母与之前不同，则追加 </section> 如果是最后一次。

一个选项是创建一个计算分组，但此数据是由 API 获取的，并且下一个字母正在滚动。那么可以用 v-for 得到那个结果吗？

Answer 1

我不确定我是否完全理解你，但我想你想要这个。

<div v-for="item in list">
      <div v-for="person in Object.keys(item)">{{item[person]}}</div>
</div>

Answer 2

使用一种计算方法属性是一种解决方案。

从 API 获取新数据后，使用 Array.concat 或 ... 运算符合并到当前数据属性.

然后在计算属性中，使用一个 Array.reduce 来获得预期的输出。

new Vue({
  el: '#app',
  data () {
    return {
      items: []
    }
  },
  computed: {
    computedItems: function () {
      return this.items.reduce((pre, cur) => {
        if (!(cur.letter in pre)) pre[cur.letter] = []
        pre[cur.letter].push(cur)
        return pre
      }, {})
    }
  },
  methods: {
    getItemsFromAPI: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "A", name: "Albert" },
            { letter: "A", name: "Archer" },
            { letter: "B", name: "Blade" },
            { letter: "B", name: "Birdie" },
        ]]
      }, 1000)
    },
    getItemsFromAPI1: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "C", name: "Albert" },
            { letter: "C", name: "Archer" },
            { letter: "D", name: "Blade" },
            { letter: "D", name: "Birdie" },
        ]]
      }, 1000)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="getItemsFromAPI()">Load Data</button>
    <button @click="getItemsFromAPI1()">Load Data (new letter)</button>
    <section v-for="(group, key) in computedItems" :key="key">
        <div>{{key}}</div>
        <div v-for="(item, index) in group" :key="index">
        {{index}}: {{item.name}}
        </div>
    </section>
</div>

如何在 Vue 中使用 v-for 显示分组项目？

How to show grouped items using v-for in Vue?

vue.js

v-for