I am trying to call a function when a Vuetify v-alert is closed. Nothing I have seen in the docs covers it. As you can see in the codepen example, there is a dismissible attribute which is used to add the ability to close the alert. But nothing I have tried allows a function to be called at the same time.

I have tried several regular Vuetify ways to achieve this such as,

v-on:onclick="func()", v-on:click="func()", and simply @click="func()", but it seems that a function cannot be called from a v-alert.

Note that I want to keep the dismissible attribute that smoothly removes the alert automatically when the close icon is clicked. I don't need to call a function to remove the alert itself, but to do something else after the alert is removed.

Any help much appreciated!

I am trying to call a function when a Vuetify v-alert is closed. Nothing I have seen in the docs covers it. As you can see in the codepen example, there is a dismissible attribute which is used to add the ability to close the alert. But nothing I have tried allows a function to be called at the same time.

I have tried several regular Vuetify ways to achieve this such as,

v-on:onclick="func()", v-on:click="func()", and simply @click="func()", but it seems that a function cannot be called from a v-alert.

Note that I want to keep the dismissible attribute that smoothly removes the alert automatically when the close icon is clicked. I don't need to call a function to remove the alert itself, but to do something else after the alert is removed.

Any help much appreciated!

• javascript
• vue.js
• vuetify.js
• alert

3 Answers 3

You can use @input on the v-alert element:

<v-alert @input="foo">

foo will be called when the [x] is clicked.

Vuetify has a dedicated click:close event that's fired when the inbuilt close button specifically is clicked

just lisetn for the event on the alert usin:

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

Vuetify provides the close slot specifically for this use case. From the slot you call any method, and the scoped toggle method to close the alert.

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

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

See the working codepen