如何在 Vuetify.js 中点击附加图标调用函数？

Question

我需要 append-icon="close" 来调用 @click="clearSearch()"

现在我正在用一个专用按钮来实现它：

 <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，它会清除输入但所有元素都保留 "filtered"。我不知道 clearable 是如何工作的，但我的 clearSearch() 方法确实有效：clearSearch() {this.search = ""} 并且它有效，这就是我使用自定义 clear input 的原因方法

Answer 1

我认为如果您删除 () 应该会起作用，因为包含 () 后，您立即只需调用一次函数。

编辑：不要忘记冒号 :

所以：

:append-icon-cb="clearSearch"

Answer 2

解决了，这里是解决方法：

为避免该问题，您应该使用 : 符号绑定属性：

:append-icon-cb="clearSearch"

并且不要放 () 否则它将不起作用（正如@Traxo 提到的）

Answer 3

使用 @click:append="clearSearch"，:append-icon-cb 已弃用。 (Source)

Answer 4

只需将 :append-icon-cb="() => (e1 = !e1)" 更改为 @click:append="() => (e1 = !e1)" 即可完美运行并移除警告...

如何在 Vuetify.js 中点击附加图标调用函数？

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

vue.js

vuetify.js

解决了，这里是解决方法：