How to use BootstrapVue alert component
BootstrapVue's components are easy to work with - this includes the alert component
By: Ajdin Imsirovic 07 October 2020
If you are brand new to Vue, it would be useful to go through our Build your first Vue 2 app today tutorial first, in which we have set up Vue and VueBootstrap locally so that everything is ready for development.
Additionally, more specific to this tutorial, as a prerequisite, please have a look at our Prepping a brand new Vue app for BootstrapVue practice tutorial. The end of the linked tutorial is our starting point.
Since our BootstrapVue app is ready, all we need to do now is add the alert example code to HelloWorld.vue. We’ll first update the template tag, like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<b-alert show>Default Alert</b-alert>
<b-alert variant="success" show>Success Alert</b-alert>
<b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
Dismissible Alert!
</b-alert>
<b-alert
:show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountDown=0"
@dismiss-count-down="countDownChanged"
>
<p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
<b-progress
variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
></b-progress>
</b-alert>
<b-button @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-button>
<b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
</b-button>
</div>
</template>
If we saved our changes and opened our browser now, we’d see a partially working app, and the following errors in the developer tools console:
[Vue warn]: Property or method "showDismissibleAlert" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
We’ll get several of these messages, each one for a different method: dismissCountDown, countDownChanged, dismissSecs, showAlert, showDismissibleAlert. Some errors are even repeating several times for the same component.
Additionally, we’ll get the following errors for invalid handlers:
[Vue warn]: Invalid handler for event "dismiss-count-down": got undefined
found in
---> <BAlert>
<HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
We’ll also get a Type Error:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'apply' of undefined"
found in
---> <HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
All of these errors are due to the fact that we haven’t updated the script element in our HelloWorld.vue file, which should look as follows:
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
}
},
methods: {
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert() {
this.dismissCountDown = this.dismissSecs
}
}
}
</script>That’s all that we need to do! The beauty of a framework like BootstrapVue is that we almost don’t have to style it at all, and thus we can skip the style element in our HelloWorld component altogether.
