Prevent closing Toast when closing Modal in BootstrapVue

user_2853270 0
Viewed 1678

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')
       }
    }
bootstrap-vue nuxt.js vue.js
3 Answers

Try to add $root.

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

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,
}
user_61894610

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
 }
user_88896610
Related