bootstrap vue toast 立即消失答案

【问题标题】：bootstrap vue toast disappears immediatelybootstrap vue toast 立即消失
【发布时间】：2021-09-24 06:00:04
【问题描述】：

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

我试过 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",

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

【问题讨论】：

如果您取消选中评论// no-auto-hide: true，它是否仍然隐藏？

标签： vue.js toast bootstrap-vue

【解决方案1】：

我使用 bootstrap v4 尝试了您的代码，它运行良好。我认为您使用的是 boostrap v5，但它与 vue-bootstrap 版本 2.21.2 不兼容。因此，请尝试降级项目的引导版本。

请参阅this codesandbox。

【讨论】：

感谢回答！我将引导版本降级到 v4，它可以工作！