The notification component will be used to display an alert to the user either success or error. This component requires data to be passed into it via props, this allows us to get the notification data from the forms and pass in the messages to be displayed. To add props to the component we just need to add the option props.
props: ['notifications']
The HTML will then loop through the notifications data props add the Twitter bootstrap classes of either alert alert-success or alert alert-danger, then display the message of the notification.
<template>
<div id="notifications">
<div v-for="notification in notifications" :class="getNotificationClass(notification)">
{{ notification.message }}
</div>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods: {
getNotificationClass: function(notification)
{
return 'alert alert-' + notification.type;
}
},
props: ['notifications']
}
</script>