I'm trying to display a message using toast. So I tried all example code on (https://getbootstrap.com/docs/5.1/components/toasts/) here,
but when I click the button to show up toast, it showed once and disappear immediately.
I tried this.$bvToast.toast
to this.$root.$bvToast.toast
and import 'bootstrap-vue/dist/bootstrap-vue.css'
but it doesn't work..
here is my code
<template>
<div>
<b-button @click="makeToast()">Show Toast</b-button>
<b-button @click="makeToast(true)">Show Toast (appended)</b-button>
</div>
</template>
<script>
export default {
data() {
return {
toastCount: 0
}
},
methods: {
makeToast(append = false) {
this.toastCount++
this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
title: 'BootstrapVue Toast',
autoHideDelay: 5000,
// 'no-auto-hide':true,
appendToast: append
})
}
}
}
</script>
exactly same the example code..
I'm using this version
"vue": "^2.6.14",
"bootstrap-vue": "^2.21.2",
How can I fix this?? Help me..
I tried your code with bootstrap v4 and it works perfectly. I think you are using boostrap v5 but it's not compatible with vue-bootstrap version 2.21.2. So try to downgrade bootstrap version of your project.
Please see this codesandbox.