VueJS CRUD - Delete Product Page

The Delete Product Page is a confirmation page used to delete the product from the database. It will simply consist of a button to submit the form, on submitting the form we then make a API DELETE method request to delete the product from the database. On successfully returning from the API we will then redirect the user back to the all products page. 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:[]
    }
}

#Get The Product

On the created lifecycle hook of Vue the component will need to fetch the product data with this ID.

created: function(){
    this.getProduct();
},

We then create the method getProduct to lookup the product by the route parameter ID and store this product data in the product data point. This needs to use Vue Resource library to get the product via the Vue router parameter. To access the Vue router parameter inside the component we need to use the code this.$route.params.id. On the return of this API call we then store the JSON in the product data point.

getProduct: function()
{
    this.$http.get('http://localhost:3000/api/product/' + this.$route.params.id).then((response) => {
        this.product = response.body;
    }, (response) => {
        // error message
    });
}

#Delete The Product

To delete the product we need to use the DELETE method on the API to delete a certain product from the database. On the submit event of the form we're going to run a method to delete the product.

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

The deleteProduct method will pick up the router parameter ID and call the DELETE method to delete the current product.

deleteProduct: function()
{
    this.$http.delete('http://localhost:3000/api/product/delete/' + this.$route.params.id, this.product, {
        headers : {
            'Content-Type' : 'application/json'
        }
    }).then((response) => {
        this.$router.push({name: 'all_products'})
    }, (response) => {
        this.notifications.push({
            type: 'danger',
            message: 'Product could not deleted'
        });
    });
}

If the API call returns successfully then we will redirect the page back to the all_products page by using this.$router.push({name: 'all_products'}). ## 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>Delete Product {{ product.name }}</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="deleteProduct">
            <p><button class="btn btn-danger">Delete Product</button></p>
        </form>
    </div>
</template>

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

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

        created: function(){
            this.getProduct();
        },

        methods: {
            getProduct: function()
            {
                this.$http.get('http://localhost:3000/api/product/' + this.$route.params.id).then((response) => {
                    this.product = response.body;
                }, (response) => {

                });
            },

            deleteProduct: function()
            {
                this.$http.delete('http://localhost:3000/api/product/delete/' + this.$route.params.id, this.product, {
                    headers : {
                        'Content-Type' : 'application/json'
                    }
                }).then((response) => {
                    this.$router.push({name: 'all_products'})
                }, (response) => {
                    this.notifications.push({
                        type: 'danger',
                        message: 'Product could not deleted'
                    });
                });
            }
        },

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