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

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

set +o noclobber

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;

    }
  }

});

Answer 2

本质上，您需要获取数组数组，以便遍历所有项目。

如果API可以返回为您分组的数据，那真是太棒了，因此您可以对其进行迭代。

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

v-用于按日期分组显示项目

2 个答案: