过滤响应数据按日期排序 [英] filter response data date wise vue

问题描述

我们如何在vue2中按日期过滤响应数据? (本月数据，本年数据，本周数据)，当我单击月"按钮时，我只希望获得本月数据.

How can we filter response data, date wise in vue2? (this month data, this year data, this week data) when I click 'month' button I wish to get this month data only.

我得到了这样的响应-[{{"date":"2017-02-05"，"views":1，"readMore":1}，{"date":"2018-03-15"， "views":1，"readMore":1}，{"date":"2018-01-27"，"views":2，2，"readMore":2}].

I got the response like this - [ { "date": "2017-02-05", "views": 1, "readMore": 1 }, { "date": "2018-03-15", "views": 1, "readMore": 1 }, { "date": "2018-01-27", "views": 2, "readMore": 2 } ].

预先感谢

computed: {
  DateWise: function () {
    if(this.duration === 'year'){ 
      return this.data.filter(item => item.date.includes(new Date().getFullYear()));
    }
    else if(this.duration === 'month'){ 
      return this.data.filter(item => item.date.includes(new Date().getMonth()+1));
    }
  }
},

推荐答案

JSON无法理解日期，因此一种好的做法是在反序列化时将日期字符串转换为日期对象.然后，您想要将源数据放入存储中，并为过滤后的数组创建计算的属性.

JSON doesn't understand dates, so a good practice is to convert date strings to date objects when you deserialize. Then, you want to put your source data in a store, and create computed properties for your filtered arrays.

这是一个有效的示例.

这是过滤后的属性的代码...

Here's the code for the filtered property...

displayDates(){
    var now = new Date(Date.now());
    switch(vueStore.currView){
    case 'all': return vueStore.allDates;
    case 'month' : return vueStore.allDates.filter(
        line => line.date > new Date(now.getFullYear(), now.getMonth(),0)
    );
    case 'year' : return vueStore.allDates.filter(
        line => line.date > new Date(now.getFullYear(), 0,0)
    )
  }
}

这篇关于过滤响应数据按日期排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！