无法触发 Vuetify v-alert close 功能

Question

我试图在 Vuetify

v-alert

关闭时调用函数。我在文档中没有看到任何内容涵盖它。正如您在 codepen 示例 中看到的，有一个

dismissible

属性用于添加关闭警报的功能。但我没有尝试过允许同时调用一个函数。

我尝试了几种常规的 Vuetify 方法来实现此目的，例如，

v-on:onclick="func()"

,

v-on:click="func()"

，简单来说就是

@click="func()"

，但似乎无法从 v-alert 调用函数。

请注意，我想保留

dismissible

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

非常感谢任何帮助！

Answer 1

您可以在

@input

元素上使用

v-alert

：

<v-alert @input="foo">

点击[x]时会调用

foo

。

Answer 2

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

Answer 3

Vuetify 有一个专用的 click:close 事件，当专门单击内置关闭按钮时会触发该事件

只需使用以下方式收听警报上的事件：

<valert closable @click:close="someFunction()"> Something happened </v-alert