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 ponent (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(...

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 ponent (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(...

• javascript
• laravel
• vue.js
• axios
• vuejs3

• 1 An Internal Server Error indicates a server side error. It's possible your server is expecting the data in a specific format. What does your Laravel log show? – tony19 Commented Sep 29, 2021 at 22:37

2 Answers 2

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>

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.