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

Posted 2023-02-22

【中文标题】v-for 按日期分组渲染项目

【英文标题】：v-for render items with groups by date

【发布时间】：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 日创建的项目.. 今天创建的项目等。

【参考方案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 无法返回分组数据？