Prevent closing Toast when closing Modal in BootstrapVue

Question

I would like to prevent closing Toast when closing Modal in BootstrapVue.

Scenario:

1. Open the Modal and Toast on the page
2. Close the modal
3. then Modal and Toast closed at the same time

Question: how to keep Toast stays

    created() {
       this.$bvModal.show('modal-form-id')
       const errorToaster = {
          title: 'Success',
          toaster: 'b-toaster-top-center',
          variant: 'success'
        }
       this.$bvToast.toast('Success', errorToaster)
    },
    methods: {
       closeModal() {
         this.$bvModal.hide('modal-form-id')
       }
    }

    

Answer 1

Try to add $root.

this.$root.$bvToast.toast("Success", errorToaster);

Answer 2

In you errorToaster add this no-auto-hide: true.

Example:

const errorToaster = {
    title: 'Success',
    toaster: 'b-toaster-top-center',
    variant: 'success',
    'no-auto-hide': true,
}

Answer 3

Toast has auto-hide-delay property - the number of milliseconds before the toast auto dismisses itself, so it closes with no connection to modal closing.

add to your code:

const errorToaster = {
      title: 'Success',
      toaster: 'b-toaster-top-center',
      variant: 'success',
      autoHideDelay: // default is 5000,
      noAutoHide: true // in order to stay it open forever
 }