What is the correct way of using axios.post in Vue 3?

I am trying to get axios.post to work in vue 3 with laravel 8 as backend but I am getting a POST http://localhost:3000/contact 500 (Internal Server Error).

This is my vue component (without css):

<template>
  <section class="contact">
    <form @submit.prevent="storeContact">
      <input type="text" placeholder="Name" v-model="name">
      <input type="text" placeholder="Email" v-model="email">
      <input type="text" placeholder="Message" v-model="message">
      <button action="post" type="submit">Submit</button>
    </form>
  </section>
</template>



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

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

    function onSuccess(msg) {
      success = true;
    };

    function onFailure(msg) {
      error = true;
    };

    function storeContact() {
      axios.post('post', {
        name: 'name',
        email: 'email',
        message: 'message'
      })
        .then((res) => {
          onSuccess(res.data.message)
        })
        .catch((error) => {
          onFailure(error.response.data.message)
        })
    };
    return {
      success,
      error,
      name,
      email,
      message,
      storeContact
    }
  }
}
</script>

In addition, is there a way to use an array instead of properties inside of axios.post like so:

axios.post('post', [name, email, message]).then(...

Answer

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>

Advertisement

Answer