by Sai gowtham

Vue axios http post request example

The below example will show you how to make post request in vue.js by using axios http library.

We are using json placeholder api to make our post request.

<template>
  <div id="app">
    <form>
      <input v-model="title" placeholder="Title" required />
      <textarea v-model="body" placeholder="Body" required />
      <button @click.prevent="sendPost()">Submit Post</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data: function() {
    return {
      post: "",
      title: "",
      body: ""
    };
  },
  methods: {
    sendPost() {
      const postData = { title: this.title, body: this.body };
      axios
        .post("https://jsonplaceholder.typicode.com/posts", postData)
        .then(res => {
          console.log(res.body);
        });
    }
  }
};
</script>

The Submit Post helps us to send the data to a Json placehodler api.

Note: You need to install axios library to use it in your vue projects.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course