Vue BootStrap toast (闪 消失 disappears)

Vue BootStrap toast (闪 消失 disappears)

when I click the button to show up toast, it showed once and disappear immediately.

Version

"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"vue": "^2.6.14",
"axios": "^0.27.2",
"vue-axios": "^3.4.1",

Main.js

import Vue from 'vue';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
Vue.use(BootstrapVue, IconsPlugin);

Main.vue

<template>
  <div>
    <b-row>
      <b-form-group>
        <b-button @click="main" block variant="outline-primary">Register</b-button>
      </b-form-group>
    </b-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    main() {
      // 验证数据
      this.$bvToast.toast(res.data.data, {
        title: "请求失败",
        variant: "danger",
        appendToast: true,
        autoHideDelay: 3000,
      });
      console.log(res.data.data);
    },
  },
};
</script>

<style>
.toast:not(.show) {
  display: block;
}
</style>

```ini

### Link

- [stackoverflow.com](https://stackoverflow.com/questions/69310215/bootstrap-vue-toast-disappears-immediately)

- [google.com](https://www.google.com/search?q=Bootstrap+Vue+Toast+immediately+disappears)

> XRSec has the right to modify and interpret this article. If you want to reprint or disseminate this article, you must ensure the integrity of this article, including all contents such as copyright notice. Without the permission of the author, the content of this article shall not be modified or increased or decreased arbitrarily, and it shall not be used for commercial purposes in any way