vuetify only trigger data-table search event with minimum 3 characters

3
votes

I am new to vuetify and manage to get the search function to work flawlessly using the example page at https://vuetifyjs.com/en/components/data-tables#examples.

However, I can't seem to find any documentation on how to only trigger the search event if user enters a minimum of 3 characters. Anyone can point me to the right direction? Thanks.

1
laravelvuetify.js

1 Answers

5
votes

You can bind the replace the search with a computed property like this

computed: {
  searchTrigger () {
    if (this.search.length >= 3) {
       return this.search
    }
  }
}

Then replace the search with that computed property.

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="searchTrigger"
>