HTTP Request

In Vue.js, we can make HTTP requests using various methods, including the native JavaScript fetch API, Axios, or the Vue Resource library.

Axios is a widely used HTTP client for making requests in Vue.js applications.

Install Axios:

First, we need to install Axios in our Vue project. We can do this using npm or yarn:

Example:

npm install axios
# or
yarn add axios

Once Axios is installed, we can use it to make HTTP requests in our Vue components or services.

GET Request in a Vue.js:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <ul v-if="data.length">
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: []
    };
  },
  methods: {
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

We import Axios and use it to make a GET request to the JSONPlaceholder API.
When the "Fetch Data" button is clicked, the fetchData method is called, which makes the GET request.
Upon successful response, the data from the response is assigned to the data property, which is then rendered in the template using v-for.
Remember to handle errors appropriately using ".catch()" to catch any errors that may occur during the request.

POST Request in Vue.js

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="userName" />
    <p>Username is: {{ userName }}</p>

    <select v-model="selectedCity">
      <option value="city1">City 1</option>
      <option value="city2">City 2</option>
      <option value="city3">City 3</option>
    </select>
    <p>Selected City: {{ selectedCity }}</p>

    <input type="checkbox" id="checkbox" v-model="isStudent" />
    <label for="checkbox"> Are you Student? </label>
    <p>Selected Checkbox value: {{ isStudent }}</p>
    <button type="submit">Submit Form</button>
  </form>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      userName: "",
      selectedCity: "",
      isStudent: false,
    };
  },
  methods: {
    submitForm() {
      // Perform data validation
      if (this.userName.trim() === "") {
        alert("Username is required field");
        return;
      } else if (this.selectedCity.trim() === "") {
        alert("City is required field");
        return;
      }

      // post request for sending form data to server
      axios
        .post("https://www.example.com/api/feedbackform", {
          userName: this.userName,
          selectedCity: this.selectedCity,
          isStudent: this.isStudent,
        })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

We have an input field bound to "userName" using "v-model". Whatever is typed in this input field will be reflected in the "userName" data property.
We have a select dropdown bound to "selectedCity" using "v-model". The selected option in the dropdown will be reflected in the "selectedCity" data property.
We have a checkbox bound to "isStudent" using "v-model". The state of the checkbox will be reflected in the "isStudent" data property.
when all the required field data is added, then it will make a call to the server to submit form data using `POST` Method.

<-- Animations

Routing -->