Vue.Js Axios Put and Patch Request Examples

Through this vuejs axios put request example tutorial you will learn a quick set of examples to show how to send HTTP PUT requests from Vue js to a backend API using the axios HTTP client which is available on npm. The easiest way to make a PUT request with Axios is the axios.put() function.

The first parameter to axios.put() is the URL, and the 2nd is the HTTP request body. Let’s check the best examles of vue axios put and patch request examples.

Axios PUT request with a JSON body

This example sends an products object to the /api/products/1 route and its show the response after updated data in your backend which are sended from your controller side.

methods: {
    updateProduct(productId) {
        const data = {
    		name: 'Test Post',
    		date: '2021.08.10'
    	};

        axios.put(`http://127.0.0.1:8000/api/products/${productId}`, data)
             .then(response => {
                 console.log(response);
             });
    }
}

PUT request using axios with error handling

Error handling is most important for showing which type errors are getting, so if the request have any issue then the .catch will collect the error mesage and show your in error.response etc..

methods: {
    updateProduct(productId) {
        const data = {
    		name: 'Test Post',
    		date: '2021.08.10'
    	};

        axios.put(`http://127.0.0.1:8000/api/products/${productId}`, data)
             .then(response => {
                 console.log(response);
             })
             .catch(function (error) {
                console.log(error.response)
             })
    }
}

axios PUT request with set HTTP headers

We can set the headers in put request just like below example.

methods: {
    updateProduct(productId) {
        const headers = { 
            'Authorization': 'Bearer my-token',
            'Content-Type': 'application/json'
        };

        const data = {
    		name: 'Test Post',
    		date: '2021.08.10'
    	};

        axios.put(`http://127.0.0.1:8000/api/products/${productId}`, data, {headers})
             .then(response => {
                 console.log(response);
             })
             .catch(function (error) {
                console.log(error.response)
             })
    }
}

axios PATCH Requeust in Vue

Same as it put request the axiot PATCH request work same in vuejs axios. We can send data, set the header and see the error messages as well.

methods: {
    updateProduct(productId) {
        const headers = { 
            'Authorization': 'Bearer my-token',
            'Content-Type': 'application/json'
        };

        const data = {
    		name: 'Test Post',
    		date: '2021.08.10'
    	};

        axios.patch(`http://127.0.0.1:8000/api/products/${productId}`, data, {headers})
             .then(response => {
                 console.log(response);
             })
             .catch(function (error) {
                console.log(error.response)
             })
    }
}

axios PUT/PATCH request full example in vue

<template>
    <div class="container">
        <h2 class="text-center">axios put/patch request example</h2>
        <div class="row">
            <div class="col-md-12">
                <form>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" v-model="product.name">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea type="text" rows="5" class="form-control" v-model="product.description"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Price</label>
                        <input type="number" class="form-control" v-model="product.price">
                    </div>
                    <button type="button" class="btn btn-primary" @click="updateProduct()">Update</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                product: {}
            }
        },
        methods: {
            updateProduct() {
                axios.patch(`http://127.0.0.1:8000/api/products/${this.product.id}`, this.product)
                     .then(response => {
                         console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error.response)
                     })
            }
        }
    }
</script>

I hope you enjoy with axios put and patch request in vue js examples..