I am using Vue-strap alert component with Vue.js. The alert box works fine, however, I am unable to auto close the alert box after specified duration. Here is the component code I am using.
<alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
The alert box remains open and close on clicking the close (x) button. Here is a code pen that uses the alert component.
https://codepen.io/Taxali/pen/dKJpKY
Any suggestion, how to auto close the alert box after 3 seconds? Thanks.
According to source code, setTimeout(_, duration) is only set if show
props is change.
So there is a workaround, you can toggle show
from false
to true
in mounted
methods, or you can use a button to toggle the alert.
Another way to setTimeout
yourself in Vue component.
var vm = new Vue({
components: {
alert:VueStrap.alert,
},
el: "#app",
data: {
alertMessage:"Activity Saved Successfully.",
showAlert:false
},
mounted() {
this.showAlert = true
}
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="app">
<alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
</div>