VueJS CRUD: Form Notifications

in VueJS Crud

notification

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>

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email