vuetify only trigger data-table search event with minimum 3 characters
up vote
0
down vote
favorite
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.
laravel vuetify.js
asked Nov 10 at 10:30
Allie Syadiqin
93
|
up vote
0
down vote
favorite
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.
laravel vuetify.js
asked Nov 10 at 10:30
Allie Syadiqin
93
|
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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.
laravel vuetify.js
asked Nov 10 at 10:30
Allie Syadiqin
93
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.
laravel vuetify.js
laravel vuetify.js
asked Nov 10 at 10:30
Allie Syadiqin
93
asked Nov 10 at 10:30
Allie Syadiqin
93
asked Nov 10 at 10:30
Allie Syadiqin
93
asked Nov 10 at 10:30
Allie Syadiqin
93
asked Nov 10 at 10:30
Allie Syadiqin
93
93
|
|
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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"
>
answered Nov 10 at 11:02
Socrates Tuas
11416
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 at 13:01
|
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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"
>
answered Nov 10 at 11:02
Socrates Tuas
11416
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 at 13:01
|
up vote
1
down vote
accepted
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"
>
answered Nov 10 at 11:02
Socrates Tuas
11416
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 at 13:01
|
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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"
>
answered Nov 10 at 11:02
Socrates Tuas
11416
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"
>
answered Nov 10 at 11:02
Socrates Tuas
11416
answered Nov 10 at 11:02
Socrates Tuas
11416
answered Nov 10 at 11:02
Socrates Tuas
11416
answered Nov 10 at 11:02
Socrates Tuas
11416
11416
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 at 13:01
|
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 at 13:01
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 at 13:01
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 at 13:01
|
