3

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.

Allie Syadiqin
  • 69
  • 1
  • 3
  • 8

1 Answers1

5

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"
>
Socrates Tuas
  • 181
  • 1
  • 8
  • Initially I had a problem as I had functions in compute and watch which was triggering the search function with every character. Once I removed them, it works perfectly. Thank you! – Allie Syadiqin Nov 10 '18 at 13:01
  • searchTrigger () { return this.search.length < 3 ? '' : this.search } – Igor Jan 14 '21 at 19:30