Estoy tratando de hacer que axios.post funcione en vue 3 con laravel 8 como backend pero obtengo un POST http://localhost:3000/contact 500 (Internal Server Error) .
Este es mi vue component (sin 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> Además, ¿hay alguna manera de usar una array en lugar de properties dentro de axios.post de esta manera:
axios.post('post', [name, email, message]).then(...Gracias a @NikolaPavicevic y @tony19 pude resolverlo.
post era de hecho un marcador de posición, pero no sabía que estaba conectado a la route . Tuve que cambiarlo a la ruta /contact correspondiente. La información de error para esto se escribió en los registros de laravel logs .onSuccess y onFailure directamente dentro de la función axios lo hace mucho más legible.Este es el código ahora:
<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>¡Muchas gracias chicos! Aceptaré la respuesta de @Nikola.
Intente lo siguiente si necesita pasar la matriz a la publicación de axios:
<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>