CODEWITHSUNDEEP
vue.jsvuetify.js
Un1
Un1

Reputation: 4132

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

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>

Upvotes: 28

Views: 39302

Answers (6)

Farzad.Kamali
Farzad.Kamali

Reputation: 593

for vuetify3 can define event based on inner icon or outer

<v-text-field
...
    @click:append-inner="fx"
    @click:append-outer="fx">
</v-text-field>

Upvotes: 0

Joe_me
Joe_me

Reputation: 31

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>

Upvotes: 3

wkornilow
wkornilow

Reputation: 817

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

Upvotes: 48

Awais Jameel
Awais Jameel

Reputation: 2206

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

Upvotes: 1

Traxo
Traxo

Reputation: 19002

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"

Upvotes: 2

Un1
Un1

Reputation: 4132

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)

Upvotes: 6

Related Questions