如何在 Vuetify.js 中单击附加图标时调用函数？答案

【问题标题】：How to call a function on append-icon click in Vuetify.js?如何在 Vuetify.js 中单击附加图标时调用函数？
【发布时间】：2018-06-09 11:17:25
【问题描述】：

我需要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，它会清除输入但所有元素都保持“过滤”状态。我不知道 clearable 是如何工作的，但我的 clearSearch() 方法很简单：clearSearch() {this.search = ""} 并且它有效，这就是我使用自定义 clear input 方法

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

从现在开始，:append-icon-cb 已被弃用。请改用@click:append。

【讨论】：

【解决方案2】：

解决了，解决办法如下：

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

:append-icon-cb="clearSearch"

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

【讨论】：

【解决方案3】：

我认为如果你删除()，它应该可以工作，因为包含()，你立即只需调用一次函数。

编辑：不要忘记冒号:

所以：

:append-icon-cb="clearSearch"

【讨论】：

好电话，但它没有解决问题，我得到了[Vue warn]: Invalid prop: type check failed for prop "appendIconCb". Expected Function, got String. 但后来我添加了: 符号并且它起作用了。感谢您的回答，它帮助我解决了问题。

【解决方案4】：

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

【讨论】：