Cannot trigger function on Vuetify v-alert close

user_1884023 0
Viewed 949

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!

vuetify.js vue.js alert javascript
2 Answers

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

<v-alert @input="foo">

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

user_68374450

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

user_46452910
Related