VueJS CRUD - Create Product Page

The Create Product Page will display a form allowing us to fill out new product data and POST this to the API to store the product data in the JSON file. This component needs two data points, one to store the data for the product and the other to store the notification messages from the form.

data(){
    return{
        product:{},
        notifications:[]
    }
}

#POST New Product

On the submit event of the form we're going to run a method to add a new product.

<form v-on:submit.prevent="addProduct">

This will need to first do any validation for the product and then POST this to the API, depending on the outcome of the API we then need to display either a success or error message.

methods: {
    addProduct: function()
    {
        // Validation
        var price = parseFloat(this.product.price);
        if(isNaN(price))
        {
            this.notifications.push({
                type: 'danger',
                message: 'Price must be a number'
            });
            return false;
        } else {
            this.product.price = this.product.price;
        }

        this.$http.post('http://localhost:3000/api/product/create', this.product, {
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then((response) => {
            this.notifications.push({
                type: 'success',
                message: 'Product created successfully'
            });
        }, (response) => {
            this.notifications.push({
                type: 'error',
                message: 'Product not created'
            });
       });
    }
}

#Notification Element

To import the notification element in JavaScript we use the code.

import Notification from './notifications.vue';

Using the components options we can define the HTML tag to attach this component to.

components: {
    'notification' : Notification
}

In the HTML we can add the notification tag and pass in the notifications data by using v-bind:notifications.

<notification v-bind:notifications="notifications"></notification>

This now passes in all the data inside notifications into the notification component. ## Full HTML For Component

<template>
    <div id="create-product">
        <h1>Create Product</h1>

        <p><router-link :to="{ name: 'all_products' }">Return to products</router-link></p>

        <notification v-bind:notifications="notifications"></notification>

        <form v-on:submit.prevent="addProduct">
            <div class="form-group">
                <label name="product_id">ID</label>
                <input type="text" class="form-control" disabled v-model="product.id" id="product_id">
            </div>

            <div class="form-group">
                <label name="product_name">Name</label>
                <input type="text" class="form-control" v-model="product.name" id="product_name" required>
            </div>

            <div class="form-group">
                <label name="product_price">Price</label>
                <input type="text" class="form-control" v-model="product.price" id="product_price" required>
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Create</button>
            </div>
        </form>
    </div>
</template>

<script>
    import Notification from './notifications.vue';

    export default{
        data(){
            return{
                product:{},
                notifications:[]
            }
        },

        methods: {
            addProduct: function()
            {
                // Validation
                var price = parseFloat(this.product.price);
                if(isNaN(price))
                {
                    this.notifications.push({
                        type: 'danger',
                        message: 'Price must be a number'
                    });
                    return false;
                } else {
                    this.product.price = this.product.price;
                }

                this.$http.post('http://localhost:3000/api/product/create', this.product, {
                    headers : {
                        'Content-Type' : 'application/json'
                    }
                }).then((response) => {
                    this.notifications.push({
                        type: 'success',
                        message: 'Product created successfully'
                    });
                }, (response) => {
                    this.notifications.push({
                        type: 'error',
                        message: 'Product not created'
                    });
                });
            }
        },

        components: {
            'notification' : Notification
        }
    }
</script>