无法在 Vuetify v-alert close 上触发功能答案

【问题标题】：Cannot trigger function on Vuetify v-alert close无法在 Vuetify v-alert close 上触发功能
【发布时间】：2021-09-20 20:34:59
【问题描述】：

当 Vuetify v-alert 关闭时，我试图调用一个函数。我在文档中看到的任何内容都没有涵盖它。正如您在the codepen example 中看到的，有一个dismissible 属性用于添加关闭警报的功能。但是我没有尝试过允许同时调用一个函数。

我已经尝试了几种常规的 Vuetify 方法来实现这一点，例如，

v-on:onclick="func()", v-on:click="func()" 和简单的 @click="func()"，但似乎无法从 v-alert 调用函数。

请注意，我想保留dismissible 属性，该属性可以在单击关闭图标时自动平滑地删除警报。我不需要调用函数来删除警报本身，而是在删除警报后执行其他操作。

非常感谢任何帮助！

【问题讨论】：

【解决方案1】：

Vuetify 专门为此用例提供了 close 插槽。从您调用任何方法的槽中，以及范围内的toggle 方法来关闭警报。

<template v-slot:close="{ toggle }">
  <v-btn @click="closeAlert(toggle)">Close</v-btn>
</template>

closeAlert(toggle){
  toggle()
  console.log("alert closed")
}

查看工作中的codepen

【讨论】：

感谢您的建议。不幸的是，这似乎破坏了dismissible 属性。按钮触发该功能，但警报仍保留在页面上。如果可能的话，我想使用内置的dismissible 部分警报，而不是额外的按钮或插槽。
您是否调用了“切换”功能？它似乎在 codepen 中工作。我认为没有其他内置选项可以实现所需的行为

【解决方案2】：

您可以在v-alert 元素上使用@input：

<v-alert @input="foo">

foo 将在单击 [x] 时被调用。

【讨论】：