CODEWITHSUNDEEP
vue.jsbootstrap-4bootstrap-vue
n00ne
n00ne

Reputation: 259

vue bootstrap toaster instantly vanishing / hiding itself

In my Vue Bootstrap (v2.21.2) Web-App i want to use Toasts to present some errors to the user. Those errors are produced by the REST-API-client. In my vb-components i catch those errors and call a function which itself uses https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast() to dynamically create and show the error-message. As expected the toast is created but will instantly hide itself again. I tried disabling the auto-hide property and play around with the timeout which had no effect. Since i am calling this function in some sub-components i also tried calling this.$root.$bvToaster.toast() but the toasts are still only showing for some 100 microseconds or so.

The relevant (reduced) code-extracts of my project:

App.vue:

<template>
  <div id="app">
    <Navbar @viewChanged="view = $event;" />
    <Pki v-if="view == 'pki'" />
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Pki from './components/Certificates'
export default {
  data() {
    return {
      view: null
    }
  },
  name: "FooBar",
  components: {
    Navbar,
    Pki
  },
};
</script>

Certificates.vue:

<template>
    <!-- ... -->
</template>

<script>
    // ...
    mounted() {
      this.getCertificates();
    },
    methods: {
      alert(title, content, variant = 'danger') {
        this.$bvToast.toast(content, {
          title: title,
          toaster: 'b-toaster-bottom-right',
          variant: variant,
          solid: true,
          appendToast: true,
          autoHideDelay: 10000
        });
      },
      getCertificates() {
        axios.get("/v1/pki/certificates")
        .then((response) => {
             // ...
          });
        })
        .catch((error) => {
          this.alert('API Error', 'failed to fetch certificate list (' + error.message + ')');
          console.log('getCertificates(): HTTP ERROR ' + error.response.status + ' (' + error.response.data + ')');
        });
      }
    }
</script>

Upvotes: 0

Views: 2000

Answers (2)

Jaydeep Pedhadiya
Jaydeep Pedhadiya

Reputation: 534

If you are using bootstrap 5 just add this css

.toast:not(.show) {
   display: block;
}

Upvotes: 5

Mathias Eckrodt
Mathias Eckrodt

Reputation: 41

I think you don't have the appropriate version of the bootstrap css.

e.g 4.5.3 bootstrap css and after load the vue bootstrap

Had the same issue, and this solved it

Upvotes: 2

Related Questions