How to filter exact mach with vuetify v-data-table?

0
votes

I'm trying to make a custom-filter to get only exact match

I want the filter to return opera if my search is opera but not :

  • opera
  • operation
  • hope

an example of how to use custom filter : https://vuetifyjs.com/en/components/data-tables/#custom-filter

Currently what I have :

<v-data-table
        :headers="headers"
        :items="words"
        item-key="name"
        :search="search"
        :custom-filter="filterPerfectMatch"
      >
...
</v-data-table>

...

methods: {
    filterPerfectMatch(value, search) {
      return value != null &&
        search != null &&
        typeof value === 'string' &&
      //  value.match(search) === true &&  <== doesn't work T T
        value.toString().indexOf(search) !== -1
    },
},
2
vue.jsfiltervuetify.jsv-data-table

2 Answers

0
votes

found it was easy af:

 filterPerfectMatch(value, search) {
      if (value == search) {
        console.log("value :" + value + ", search :" + search)
        return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().indexOf(search) !== -1
      }

      
    },
0
votes

If you want the exact match, use an == or === for string compare. No need to use indexOf.

methods: {
    filterPerfectMatch(value, search) {
      return value != null && value === search
    },
},

You can also add toLowercase() to value and search, but you'll need to add checks whether they are strings back.