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(...
Thanks to @NikolaPavicevic and @tony19 I was able to resolve it.
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.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.
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>