Can someone help me figure out how to implement the v-alert dismissible component with additional functionality when the close button is clicked? According to the documentation, there is a function called toggle in the close slot that allows you to "Toggles the alert’s active state. Available in the close slot and used as the click action in dismissible."
https://vuetifyjs.com/en/api/v-alert/#functions
https://vuetifyjs.com/en/api/v-alert/#slots-close
Here's what I have tried so far without success:
<template>
<div id="app">
<v-app>
<v-alert dismissible v-model="message">
{{ message }}
<template v-slot:close="{ toggle }">
<v-btn color="primary" dark @click="myFunction"> Dismiss </v-btn>
</template>
</v-alert>
</v-app>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
message: "The message",
}),
methods: {
myFunction() {
console.log("do something before dismiss");
},
},
};
</script>