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

Question

如何在 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 日创建的项目...今天创建的项目等。

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