web-dev-qa-db-fra.com

Comment appeler une fonction sur un clic d'icône d'ajout dans Vuetify.js?

J'ai besoin du append-icon="close" Pour appeler @click="clearSearch()"

En ce moment je l'implémente avec un bouton dédié:

 <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>
  • J'ai essayé d'ajouter append-icon-cb="clearSearch()" mais ça ne marche pas et je ne sais pas pourquoi
  • J'ai aussi essayé simplement d'utiliser clearable, cela efface l'entrée mais tous les éléments restent "filtrés". Je ne sais pas comment fonctionne clearable mais ma méthode clearSearch() fonctionne simplement: clearSearch() {this.search = ""} et cela fonctionne, c'est pourquoi j'utilise le custom clear input méthode
vue.jsvuetify.js
9
Un1

Résolu, voici la solution:

Pour éviter ce problème, vous devez lier l'attribut avec : symbole:

:append-icon-cb="clearSearch"

Et ne mettez pas () sinon cela ne fonctionnera pas (comme @Traxo l'a mentionné)

5
Un1

À partir de maintenant :append-icon-cb est obsolète. Utilisation @click:append au lieu.

18
wkornilow

Je pense que cela devrait fonctionner si vous supprimez (), car avec () inclus, vous appelez immédiatement la fonction une seule fois.

Edit: n'oubliez pas les deux points :

Donc:

:append-icon-cb="clearSearch"
2
Traxo

Changez simplement :append-icon-cb="() => (e1 = !e1)" en @click:append="() => (e1 = !e1)" et cela fonctionnera parfaitement et supprimez l'avertissement aussi ...

0
Awais Jameel