How to filter array based on Text and Date range picker in Vuejs?

Question

I have an input where users can search for titles. Date picker which is used mengxiong10/vue2-datepicker. (Any other picker is welcome)

How can the array be filtered by only Search, only Date, or both Search and Date? (Search via Title works ).

How would the search be in array vs nested array?

HTML-

<input class="form-control" type="text" v-model="search" placeholder="Search" /></div>  
<date-picker v-model="datefilter" range></date-picker>

<div v-for="item in resultQuery">
 {{item.title}}
</div>

Vuejs-

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    el: '#app',
    components: { DatePicker },
    data() {
      return {
        search: null,
        resources:[
            {title:"AAA",date: 1622192760},
            {title:"BBB",date: 1622624760},
            {title:"CCC",date: 1620810360},
            {title:"DDD",date: 1625907960},
            {title:"EEE",date: 1623315960},
        ],
        resources2:[
            {id:1,items: [{ title: 'a',date: 1622192760 }, {name: 'aa', date: 1622624760 }]},
            {id:2,items: [{ title: 'b',date: 1623315960 }, {name: 'bb', date: 1625907960 }]},
            {id:3,items: [{ title: 'c',date: 1622624760 }, {name: 'cc', date: 1622624760 }]},
            {id:4,items: [{ title: 'd',date: 1622624760 }, {name: 'dd', date: 1622624760 }]},
            {id:5,items: [{ title: 'e',date: 1622192760 }, {name: 'ee', date: 1622624760 }]},
        ],

        datefilter: null,
      };
    },
    computed: {
    resultQuery(){
      if(this.search){
      return this.resources.filter((item)=>{
        return item.title.toLowerCase().includes(this.search.toLowerCase())) }
      })
      }else{
        return this.resources;
      }
    }
  }
  };
</script>

tony19 · Accepted Answer · 2021-05-28 10:12:24Z

1

You could factor out the filtering into its own functions:

const byDate = (item) => {
  const itemDate = new Date(item.date);
  return itemDate >= new Date(this.datefilter[0]) &&
         itemDate <= new Date(this.datefilter[1])
}

const byTitle = (item) =>
  item.title.toLowerCase().includes(this.search.toLowerCase())

Then pass them into this.resources.filter() when the search field isn't empty or when a date range is selected:

export default {
  computed: {
    resultQuery() {
      //...
      let results = this.resources

      if (this.search) {
        results = results.filter(byTitle)
      }

      const hasDateFilter = this.datefilter?.length >= 2 && this.datefilter[0] && this.datefilter[1]
      if (hasDateFilter) {
        results = results.filter(byDate)
      }

      return results
    }
  }
}

demo

answered May 28, 2021 at 10:12

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to filter array based on Text and Date range picker in Vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related