Bootstrap-vue如何在方法结束时显示alert和dismiss？

Question

大家好，为什么要在我的方法开始时显示 bootstrap-vue 警报并在我的方法结束时关闭警报。我用 javascript 如果你伤人。

我尝试使用：

<b-alert :v-if="dismissCountDown"
           dismissible
           :variant= alertVariant
           @dismissed="dismissCountDown=0"
           @dismiss-count-down="countDownChanged">
    {{alertMessage}}
  </b-alert>

在我的数据中我有变量 showAlert: false,

我想在 showAlert 设置为 true 时显示警报

有知道的请告诉我

Answer 1

使用 v-model 而不是 v-if。这是一个延迟 2 秒的简单示例：

new Vue({
  el: "#app",
  data() {
    return {
      showAlert: false,
      alertMessage: 'This is the alert message'
    }
  },
  methods: {
    delayedAlert() {
      this.showAlert = true;
      setTimeout(() => {
        this.showAlert = false;
      }, 2000);
    }
  }
});

<div id="app">
  <button @click="delayedAlert">Show alert for 2s</button>
  <b-alert v-model="showAlert">
    {{alertMessage}}
  </b-alert>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.19.0/bootstrap-vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.19.0/bootstrap-vue.min.css" rel="stylesheet" />

Bootstrap-vue如何在方法结束时显示alert和dismiss？

Bootstrap-vue how to show alert and dismiss in the end of the method?

javascript

alert

dismiss

vue.js

bootstrap-vue