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
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 10 at 10:30
Allie Syadiqin
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 10 at 10:30
Allie Syadiqin
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 10 at 10:30
Allie Syadiqin
33
asked Nov 10 at 10:30
Allie Syadiqin
33
33
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Allie Syadiqin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
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
1045
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
add a comment |
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
1045
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
add a comment |
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
1045
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
add a comment |
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
1045
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
1045
answered Nov 10 at 11:02
Socrates Tuas
1045
answered Nov 10 at 11:02
Socrates Tuas
1045
answered Nov 10 at 11:02
Socrates Tuas
1045
1045
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
add a comment |
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
add a comment |
Allie Syadiqin is a new contributor. Be nice, and check out our Code of Conduct.
Allie Syadiqin is a new contributor. Be nice, and check out our Code of Conduct.
Allie Syadiqin is a new contributor. Be nice, and check out our Code of Conduct.
Allie Syadiqin is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238053%2fvuetify-only-trigger-data-table-search-event-with-minimum-3-characters%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
