SOLVED: useToast AutoClose Timer Reset #2946
Description
I upgraded from version 0.22 to 0.40.
I'd never noticed this before, but I stumbled across the following:
if I set the useToast modelvalue to, for example, 10 seconds, the toast stays open for 10 seconds and the progress bar counts down until it closes – that's fine.
However, when the toast is open and I click on another link in my routes within my app, this auto-close timer is reset, and the toast remains open for 10 seconds. So, every time I load a link and thus a new component, the countdown is reset. Here's my code where useToast is used.
<template>
<BOrchestrator />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { mapState, mapActions, mapGetters } from 'vuex'
import { useToast } from 'bootstrap-vue-next'
import type { INotificationMessage } from '../../interfaces/INotificationMessage'
const initialNotificationMessage: INotificationMessage = {
show: false,
text: 'Daten wurden gespeichert',
variant: 'success',
textcolor: '',
messagedisplayduration: 1000 // 1 seconds
}
export default defineComponent({
name: 'notificationmessage',
setup: () => ({ toast: useToast() }),
data() {
return {
notificationmsg: {...initialNotificationMessage } as INotificationMessage,
showmessage: false,
timerid: -1
}
},
watch: {
getNotificationMessage: {
immediate: false,
deep: true,
handler(newval: INotificationMessage | null, oldval) {
if (newval === null){ return;}
this.notificationmsg = {...this.notificationmsg, ...newval }
const messagedisplayduration = this.notificationmsg.variant == "danger" ? 10000 : 1000;
this.toast.create({
body: this.notificationmsg.text,
variant: this.notificationmsg.variant,
pos: 'top-end',
modelValue: messagedisplayduration,
interval: 100,
progressProps: { variant: 'dark', }
})
}
}
},
computed: {
...mapGetters('notification', {
getNotificationMessage: 'getNotificationMessage'
}),
},
methods: {
...mapActions('notification', {
setNotificationMessage: 'setNotificationMessage'
}),
dismiss() {
this.setNotificationMessage(null);
}
}
});
</script>
i believe what it is, because my notificationmessage.vue is on every page, and therefore the reset.
I just don't understand why only the timer is reset; the content remains unchanged.
appendToast: true dos not work
Unfortunately, I don't have a StackBlitz example; creating one would probably take too long – perhaps there's a simple explanation for this?
I have the solution - move BOrchestrator to App.vue and remove it from each page
Thanks anyway for your help.