Bootstrap-vue 如何在方法的末尾显示警报和解雇？

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