如何根據多個條件過濾數組？

Question

如何根據多個條件過濾數組？ 我默認選中了多個復選框，我想根據start_date和end_date進行過濾：

• 未來：
  start_date晚於今天

  過去： end_date日期晚於今天日期

  in_progress : start_date晚於或等於今天但end_date不晚於今天日期

<input v-model="future" type="checkbox" />
<input v-model="past" type="checkbox" />
<input v-model="in_progress" type="checkbox"/>

data: function () {
  return {
    past: true,
    future: true
    in_progress: true
    items: [
   {
      "name":"Test",
      "start_date":""2022-01-01T07:00:00-08:00"",
      "end_date":""2022-03-01T07:00:00-08:00"",
      "id":"2asfa3r9adsgu83yf83"
   },
   {
      "name":"Test",
      "start_date":""2020-01-01T07:00:00-08:00"",
      "end_date":""2020-02-01T07:00:00-08:00"",
      "id":"1asfa3r9adsgu83yf83"
   },
   {
      "name":"Test",
      "start_date":""2021-10-12T07:00:00-08:00"",
      "end_date":""2022-10-19T07:00:00-08:00"",
      "id":"6asfa3r9adsgu83yf83"
   },
]
  }
}

Answer 1

對於in_progress

 const items = [ { "name":"Test", "start_date":"2022-01-01T07:00:00-08:00", "end_date":"2022-03-01T07:00:00-08:00", "id":"2asfa3r9adsgu83yf83" }, { "name":"Test", "start_date":"2020-01-01T07:00:00-08:00", "end_date":"2020-02-01T07:00:00-08:00", "id":"1asfa3r9adsgu83yf83" }, { "name":"Test", "start_date":"2021-10-12T07:00:00-08:00", "end_date":"2022-10-19T07:00:00-08:00", "id":"6asfa3r9adsgu83yf83" }, ] const in_progress = items.filter(item => Date.now() > new Date(item.start_date) && Date.now() < new Date(item.end_date)) console.log(in_progress)

Answer 2

您可以在數組上使用 .filter() 並執行過濾。

 const data = () => { return { past: true, future: true, in_progress: true, items: [ { name:"Test1", start_date:"2022-01-01T07:00:00-08:00", end_date:"2022-03-01T07:00:00-08:00", id:"2asfa3r9adsgu83yf83" }, { name:"Test2", start_date:"2020-01-01T07:00:00-08:00", end_date:"2020-02-01T07:00:00-08:00", id:"1asfa3r9adsgu83yf83" }, { name:"Test3", start_date:"2021-10-12T07:00:00-08:00", end_date:"2022-10-19T07:00:00-08:00", id:"6asfa3r9adsgu83yf83" }, ] } } let tempItems = data().items const newtempItems = tempItems.filter(item => Date.parse(item.start_date) >= Date.now()) console.log(newtempItems);