[Vuejs]-Vue – How to search filter specific part in data?

0👍

Assuming you have a filter (text, dropdown, etc) that is

  1. bound to the data member filterText.
  2. Has a 2 digit string value to represent month.
  3. Uses empty string to mean ‘no filter’.

You would do this:

computed: {
  filteredList() {
    return this.items.filter(item => {
      const field = parseInt(item.date.substring(5, 7)) // the month part of the date

      if (this.filterText === '') return true
      else return field === this.filterText
    })
  }
}

Here is a sample filter element, binding to filterText

<select v-model='filterText'>
    <option v-for='n in 12' :value='pad2(n)'>{{n}}</option>
</select>

Bound to data

  data: {
    filterText:'03'
  },

And a padding method

methods: {
     pad2(number) {
  if (number<=99) { number = ("0"+number).slice(-2); }
  return number;
}

0👍

I recommend you to use Moment.js if you work a lot with times since it supports tons of operations.

Here some more Docs and a related SO Post

Leave a comment