时间戳

首页 > 解决方案 > bootstrap vue toast 立即消失

vue.js - bootstrap vue toast 立即消失

问题描述

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

我试着this.$bvToast.toast和this.$root.$bvToast.toastimport '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",

我怎样才能解决这个问题？？帮我..

标签： vue.jstoastbootstrap-vue

解决方案

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

请参阅此代码框。

推荐阅读