Why axios request fail with 400? - axios

Question

I'm new to Composition API and I don't know why I get http response 400. Payload in request looks same as json object. I have to send to an api a nested object. JSON object looks like this:
{
"contact": {
"email": "",
"firstname": "",
"lastname": "",
},
"description": "",
"preference": "",
"title": "",
"hobbies": [],
"maxSum": -17692428,
"minSum": 98485775,
"interests": [
{
"interest1": ""
},
{
"intereest2": ""
}
],
"passions": [
{
"pasion1": ""
},
{
"passion2": ""
}
]
}
My template is:
<template>
<form class="form" novalidate="">
<div class="form__header">
<h3 class="form__title">Title</h3>
</div>
<div class="form__section">
<label for="title">Title*</label>
<input
type="text"
v-model="title"
/>
</div>
<div class="form__section">
<label for="preference"> Preference*</label>
<textarea
type="text"
v-model="preference"
/>
</div>
<div class="form__section">
<label for="hobbies"> Programming languages*</label>
<textarea
type="text"
v-model="hobbies"
/>
</div>
<div class="form__section">
<label for="interests"> interests*</label>
<textarea
type="text"
v-model="interests"
/>
</div>
<div class="form__section">
<label for="passions"> passions*</label>
<textarea
type="text"
v-model="passions"
/>
</div>
<div class="form__section">
<div> Job mobility*</div>
<select v-model="preference">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form__section">
<label for="minSum"> Minimum Payment *</label>
<input
type="number"
v-model="minSum"
/>
</div>
<div class="form__section">
<label for="maxSum"> Maximum Payment *</label>
<input
type="number"
v-model="maxSum"
/>
</div>
<div class="form__section">
<label for="name"> name*</label>
<input
type="text"
placeholder=" Name"
v-model="contact.firstname"
/>
</div>
<div class="form__section">
<label for="last name"> last name *</label>
<input
type="text"
placeholder=" Last Name"
v-model="contact.lastname"
/>
</div>
<div class="form__section">
<label for="email"> email *</label>
<input
type="email""
placeholder=" Email"
v-model="contact.email"
/>
</div>
<div class="form-buttons">
<div class="form__section">
<button
#click.prevent="save()"
id="save"
class="form__submit"
type="submit"
data-inline="true"
>
Save
</button>
</div>
</div>
</form>
</template>
And script tag:
<script>
import { reactive, toRefs } from "vue";
import { ref } from "vue-demi";
export default {
setup() {
const handleSave = reactive({
title: "",
description: "",
hobbies: [],
passions: [],
interests: [],
description: "",
maxSum: "",
minSum: "",
contact: {}
});
const isSaveAdded = ref(false)
const addSave = async () => {
const body = {}
body.title = handleSave.title
body.description = handleSave.description
body.hobbies = handleSave.hobbies.toString().split(",").map(value => {return {hobby:value }})
body.technologies= handleJob.technologies.toString().split(",").map(value => {return {techName:value }})
body.passions = [handleSave.passions]
body.interests = handleSave.interests
body.maxSum = handleSave.maxSum
body.minSum = handleSave.minSum
body.contact = handleSave.contact
const response = await axios.post("/foo", body,
{
headers: {
///////////////////////
}
});
handleSave.value = response.data;
isSaveAdded.value = true
};
return {
...toRefs(handleSave),
addSave,
isSaveAdded
};
}
};
</script>
Why request is not successful and what should it look like? Thank you