bootstrap vue toast 立即消失

Question

我正在尝试使用 toast 显示消息。所以我在这里尝试了 (https://getbootstrap.com/docs/5.1/components/toasts/) 上的所有示例代码，
但是当我点击按钮显示吐司时，它显示一次并立即消失。

我试过 this.$bvToast.toast 到 this.$root.$bvToast.toast 和 import 'bootstrap-vue/dist/bootstrap-vue.css'

但是没用..

这是我的代码

<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>

与示例代码完全相同..

我正在使用这个版本

"vue": "^2.6.14",
"bootstrap-vue": "^2.21.2",

我该如何解决这个问题？？帮帮我..

Answer 1

我用 bootstrap v4 试过你的代码，它工作得很好。我认为您使用的是 boostrap v5，但它与 vue-bootstrap 版本 2.21.2 不兼容。因此，请尝试降级项目的 bootstrap 版本。

请参阅this codesandbox。

Answer 2

将此添加到 CSS for Bootstrap 5:

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

Answer 3

您需要将 bootstrap-vue 版本降级到 4.6。祝你有个好的一天。修改为 package.json 并在使用下一个命令后。

npm i

bootstrap vue toast 立即消失

bootstrap vue toast disappears immediately

vue.js

toast

bootstrap-vue