I am using VueJS and a Vue mixin method like this so as to have this toast method available in my components:
Vue.mixin({
methods: {
makeSuccessToast(message, toaster) {
this.$bvToast.toast(message, {
title: 'Success',
variant: 'success',
toaster: toaster || 'b-toaster-bottom-right',
solid: true,
autoHideDelay: 2000,
noHoverPause: true,
appendToast: true,
});
},
},
});
It does not work when calling this method via setTimeout or setIntervall or when debouncing it with lodash. It simply won't work when trying to make toasts via bootstrap vue's toast helper out of the main loop process whatever. Anyone know a fix for it?
Example when it won't work inside a VueJS component:
via setTimeout in a component method:
doSomething() {
setTimeout(() => {this.makeSuccessToast('Something happened')}, 2000);
}
via lodash's debounce:
data(){
this.dsth: ()=>{};
},
methods:{
doSomething() {
this.makeSuccessToast('Something happened');
}
},
mounted() {
this.dsth = this._.debounce(this.doSomething, 5000);
}
Edit:
I didn't realize I was doing a Toast in a component that gets removed. The Toast should have been a notification that this component is deleted. Toasts will vanish as soon as the component is removed so that's why I thought it doesn't work. The solution was to dispatch toasts on the root element in the Mixin method via:
this.$root.$bvToast.toast(...)