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

Answer 1

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

Answer 2

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)