How to call a function on append-icon click in Vuetify.js?

Question

I need the append-icon="close" to call @click="clearSearch()"

Right now I'm implementing it with a dedicated button:

 <v-text-field 
       v-model="search" 
       class="search" 
       label="search" 
       prepend-icon="search" 
       append-icon="close">
 </v-text-field>    

 <v-btn @click="clearSearch()"></v-btn>

I've tried adding append-icon-cb="clearSearch()" but it doesn't work and I don't know why
I've also tried simply using clearable, it clears the input but all the elements stay "filtered". I don't know how clearable works but my clearSearch() method simply does: clearSearch() {this.search = ""} and it works, that's why I use the custom clear input method

score 45 · Answer 1 · edited Jan 20 '22 at 00:57

45

Use @click:append="clearSearch", :append-icon-cb is deprecated. (Source)

edited Jan 20 '22 at 00:57

Nathan Wailes

9,872
7
57
95

answered Sep 05 '18 at 15:58

wkornilow

777
5
10

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Solved it, here's the solution:

To avoid that problem you should bind the attribute with : symbol:

:append-icon-cb="clearSearch"

And don't put () otherwise it will not work (as @Traxo mentioned)

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '17 at 16:43

Un1

3,874
12
37
79

Traxo · Answer 3 · 2017-12-30T17:25:06.560

2

I think it should work if you remove (), because with () included, you immediately just call function once.

Edit: don't forget colon :

So:

:append-icon-cb="clearSearch"

edited Dec 30 '17 at 17:25

answered Dec 30 '17 at 15:57

Traxo

18,464
4
75
87

1

Good call, but it didn't solve the problem, I got `[Vue warn]: Invalid prop: type check failed for prop "appendIconCb". Expected Function, got String.` But then I added `:` symbol and it worked. Thanks for the answer, it helped me to solve the problem. – Un1 Dec 30 '17 at 16:41

Joe_me · Answer 4 · 2022-09-09T12:53:54.510

2

This changed though: For append icons e.g append-icon="mdi-magnify-plus-outline", you just do @click:append="zoomIn".

But for append outer icons like append-outer-icon="mdi-plus-circle-outline",` you must add the word append i.e

 @click:append-outer="addMore"

therefore, this will work with Vue2

  <v-text-field
       solo
       append-outer-icon="mdi-plus-circle-outline"
       @click:append-outer="addMore"
       >
</v-text-field>

edited Sep 09 '22 at 12:53

answered Sep 09 '22 at 12:51

Joe_me

21
3

for inner icons this would be @click:append-inner="addMore" – Mariusz Oct 09 '22 at 12:05

score 1 · Answer 5 · answered Apr 17 '19 at 09:17

1

Just Change :append-icon-cb="() => (e1 = !e1)" to @click:append="() => (e1 = !e1)" and this will work perfectly and remove the warning too...

answered Apr 17 '19 at 09:17

Awais Jameel

1,838
19
14

How to call a function on append-icon click in Vuetify.js?

5 Answers5

Solved it, here's the solution: