web-dev-qa-db-ja.com

Vuetify.jsでappend-iconクリックで関数を呼び出す方法は？

@click="clearSearch()"を呼び出すには_append-icon="close"_が必要です

今、私は専用のボタンでそれを実装しています：

_ <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>
_
  • append-icon-cb="clearSearch()"を追加しようとしましたが、機能せず、理由がわかりません
  • また、単にclearableを使用してみました。入力はクリアされますが、すべての要素は「フィルター」されたままです。 clearableがどのように機能するのかわかりませんが、私のclearSearch()メソッドは単にclearSearch() {this.search = ""}と機能します。だからカスタムclear inputメソッド
vue.jsvuetify.js
9
Un1

それを解決した、ここに解決策があります：

この問題を回避するには、属性を:シンボルでバインドする必要があります。

:append-icon-cb="clearSearch"

()を置かないでください。そうしないと動作しません（@Traxoが述べたように）

5
Un1

今から :append-icon-cbは非推奨です。使用する @click:append代わりに。

18
wkornilow

()が含まれていると、すぐに関数を1回呼び出すだけなので、()を削除しても機能するはずです。

編集：コロン:を忘れないでください

そう：

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

:append-icon-cb="() => (e1 = !e1)"を@click:append="() => (e1 = !e1)"に変更するだけで完全に機能し、警告も削除されます...

0
Awais Jameel