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!
You can use @input on the v-alert element:
<v-alert @input="foo">
foo will be called when the [x] is clicked.
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