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

Posted 2023-02-22

【中文标题】如何在 Vuetify.js 中单击附加图标时调用函数？

【英文标题】：How to call a function on append-icon click in 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

方法的原因

【参考方案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)" 即可完美运行，并且也可以删除警告...