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({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; showAlert: false,&nbsp; &nbsp; &nbsp; alertMessage: 'This is the alert message'&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; delayedAlert() {&nbsp; &nbsp; &nbsp; this.showAlert = true;&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; this.showAlert = false;&nbsp; &nbsp; &nbsp; }, 2000);&nbsp; &nbsp; }&nbsp; }});<div id="app">&nbsp; <button @click="delayedAlert">Show alert for 2s</button>&nbsp; <b-alert v-model="showAlert">&nbsp; &nbsp; {{alertMessage}}&nbsp; </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" />