artemsky / vue-snotify

Vuejs 2 Notification Center
https://artemsky.github.io/vue-snotify/
MIT License
792 stars 98 forks source link

Can't get confirm notifications to dismiss after button click #51

Open pslyman opened 5 years ago

pslyman commented 5 years ago

I'm using this in VueJS2:

this.$snotify.confirm('Are you sure you want to delete the "' + field + '" column?', 'Confirm', { timeout: 5000, showProgressBar: true, closeOnClick: true, position: 'centerCenter', pauseOnHover: true, buttons: [ {text: 'Yes', action: () => {this.removeColumn(); this.$snotify.remove(this.toast.id);}, bold: false}, {text: 'No', action: () => this.$snotify.remove(this.toast.id)}, ] });

The main issue I'm having is with this.$snotify.remove(this.toast.id); (toast.id) gives an error that toast is not defined (as recommended in documentation), so I'm trying to target it using (this.toast.id). It doesn't work.

I've tried using this.$snotify.remove() or this.$snotify.clear(), and technically they work, however the click function (this.removeColumn()) doesn't get called.

I believe this is a bug. Is there a work-around, or am I doing something wrong?

Thanks!

nros commented 5 years ago

You need to use a parameter name with your action function. The current toast data can not made available on this, since you use an ES5 arrow-function. It is provided as parameter. Hence write this:

[
    {text: 'Yes', action: (toast) => {this.removeColumn(); this.$snotify.remove(toast.id);}, bold: false}, 
    {text: 'No', action: (toast) => this.$snotify.remove(toast.id)}
]

see example https://artemsky.github.io/vue-snotify/documentation/essentials/examples.html#confirm

This should fix it.