[Vuejs]-What is the correct way of using axios.post in Vue 3?

by

1👍

✅

Try like following if You need to pass array to axios post :

<template>
  <section class="contact">
    <form>
      <input type="text" placeholder="Name" v-model="user.name">
      <input type="text" placeholder="Email" v-model="user.email">
      <input type="text" placeholder="Message" v-model="user.message">
      <button @click.prevent="storeContact">Submit</button>
      <p v-if="error">{{ error }}</p>
    </form>
  </section>
</template>



<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = '';
    const user = ref({
      name: '',
      email: '',
      massage: ''
    });

    function storeContact() {
      axios.post('Your-API-URL', Object.values(user.value))
        .then((res) => {
          console.log(res.data)
          success = true
        })
        .catch((error) => {
          error = error.data.message
          )
        })
    };
    return {
      success,
      error,
      user,
      storeContact
    }
  }
}
</script>
👤Nikola Pavicevic

2👍

Thanks to @NikolaPavicevic and @tony19 I was able to resolve it.

  1. The post field was indeed a placeholder but I didn’t know that it connected to the route. I had to change it to the corresponding route /contact. The error information for this was written in the laravel logs.
  2. It is indeed possible to write the posted info inside an (array like?) object. In addition putting the code from onSuccess and onFailure directly inside the axios function makes it so much more readible.

This is the code now:

<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = false;
    const user = ref({
      name: null,
      email: null,
      message: null
    });

    function storeContact() {
      axios.post('/contact', Object.values(user.value))
        .then((res) => {
          success = true
        })
        .catch((error) => {
          error = error.data.message
        })
    };

    return {
      success,
      error,
      user,
      storeContact
    }
  }
}
</script>

Thank you so much guys! I will accept @Nikola’s answer.

👤Artur Müller Romanov

Leave a comment