Javascript v-用于按日期分组的渲染项

如何在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>

今天创建的项目


{{item.name}

昨天创建的项目


{{item.name}

2月2日创建的项目


{{item.name}

2月4日创建的项目


{{item.name}

---

有可能吗？我将收到这些数据总是从api，所以它将是动态数据，这意味着我将需要标题也得到动态，我的意思是，例如：项目创建2月4日。。。2月3日创建的项目。。今天创建的项目等。

基本上，您需要获得数组数组，以便对项目进行迭代

如果API能够返回为您分组的数据，那么您就可以对其进行迭代，这将是非常棒的

---

如果你没有这种奢侈，你需要自己对数据进行分组。我建议使用来确定项目应转到哪个组。

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

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
项目：[{
名称：‘a’，
创建：“2019-02-03T02:31:46.3485544”
},
{
名称：‘b’，
创建：“2019-02-03T02:31:46.3485544”
},
{
名称：‘c’，
创建：“2019-02-03T02:31:46.3485544”
},
{
名称：“d”，
创建：“2019-02-04T02:31:46.3485544”
},
{
名称：“d”，
创建：“2019-02-04T02:31:46.3485544”
}
]
}
},
计算：{
groupByDay（）{
设g={}；
this.items.forEach（item=>{
设d=item.created.substring（0,10）；
if（g[d]）{
g[d].push（item.name）；
}否则{
g[d]=[]；
g[d].push（item.name）；
}
});
返回g；
}
}
});

已创建的项：{key}

{{name}

如果从api返回的数据不能与groupped一起返回给我？