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

CodePudding user response：

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>

CodePudding user response：

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.