v-for 按日期分组渲染项目答案

【问题标题】：v-for render items with groups by datev-for 按日期分组渲染项目
【发布时间】：2019-06-27 12:04:27
【问题描述】：

如何在 Vue.js 中按日期呈现带有分组的项目？

例如：我有一个动态数据数组，这些数据将来自以下类型的 api：

items: [
    {
        name: 'a',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'b',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'c',
        created: '2019-02-03T02:31:46.3485544'
    },
    {
        name: 'd',
        created: '2019-02-04T02:31:46.3485544'
    },
    {
        name: 'd',
        created: '2019-02-04T02:31:46.3485544'
    }
]

我想像这样渲染列表：

<p> items created today </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created yesterday </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created February 2 </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

<p> items created February 4 </p>
<ul>
    <li v-for="item in items">{{item.name}}</li>
</ul>

有可能吗？我将始终从 api 接收此数据，因此它将是动态数据，这意味着我也需要动态获取标题，我的意思是例如：2 月 4 日创建的项目... 2 月 3 日创建的项目.. 今天创建的项目等。

【问题讨论】：

标签： javascript arrays vue.js vuejs2 vue-component

【解决方案1】：

您可以创建一个计算属性来按天对数据进行分组：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          name: 'a',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'b',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'c',
          created: '2019-02-03T02:31:46.3485544'
        },
        {
          name: 'd',
          created: '2019-02-04T02:31:46.3485544'
        },
        {
          name: 'd',
          created: '2019-02-04T02:31:46.3485544'
        }
      ]
    }
  },
  computed: {
    groupByDay() {
      let g = {};
      this.items.forEach(item => {
        let d = item.created.substring(0, 10);
        if (g[d]) {
          g[d].push(item.name);
        } else {
          g[d] = [];
          g[d].push(item.name);
        }
      });

      return g;

    }
  }

});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
   <div v-for="(item,key,index) in  groupByDay">
     <h5>items created : {{key}}</h5>
     <ul>
     <li v-for="name in item">{{name}}</li>
     </ul>
   
   </div>
</div>

【讨论】：

【解决方案2】：

基本上您需要获取数组的数组，以便迭代项目。

如果 API 可以返回为您分组的数据，那就太棒了，这样您就可以对其进行迭代。

如果您没有这种奢侈，您需要自己对数据进行分组。我建议使用https://date-fns.org/ 来确定该项目应该去哪个组。

【讨论】：

如果从 api 无法返回分组数据？