How can I use Axios with Vue 3 forms?

How can I use Axios with Vue 3 forms?

You can use Axios to handle form submissions in Vue 3 by making HTTP requests. First, install Axios using npm.

What are the steps to set it up?

1. Install Axios: npm install axios. 2. Import Axios in your component. 3. Create a method to handle form submission and use Axios to send data.

Can you show me a code example?

Sure! Here's a simple example:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" placeholder="Name" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      formData: { name: '' }
    };
  },
  methods: {
    async submitForm() {
      try {
        const response = await axios.post('https://example.com/api', this.formData);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

What if I want to handle errors?

You can handle errors in the catch block of your Axios request. You can also display error messages in your template.