How to prevent Vue Snotify confirm from showing multiple instances - vue.js

Question

I'm pretty new to Vue and Snotify, so please forgive the newb question. I've scanned the docs, and nothing jumps out at me.
Here's the deal: I have a Vue component that deletes files, using a Snotify confirm box. Like this:
destroy() {
this.$snotify.confirm('', 'Delete File?', {
buttons: [
{
text: 'Yes',
action: (toast) => {
axios.delete([API endpoint])
.then(response => {
// destroy the vue listeners, etc
this.$destroy();
// remove the element from the DOM
this.$el.parentNode.removeChild(this.$el);
});
this.$snotify.remove(toast.id);
}
},
{
text: 'No',
action: (toast) => {
this.$snotify.remove(toast.id)
}
}
]
})
}
The problem is that if you click the "Delete" button a second time, another "Delete File?" confirmation appears above the first. Expected behavior is that the second click make the confirmation go away.
Any help you can offer would be greatly appreciated.

Answer 1

this.$snotify.confirm() returns the toast info, which includes an ID that could be passed to this.$snotify.remove() for removal:
export default {
methods: {
destroy() {
if (this._toast) {
this.$snotify.remove(this._toast.id, true /* immediate */)
}
this._toast = this.$snotify.confirm('', 'Delete File?', {/*...*/})
}
}
}
demo