HTTP post returns 400 (Bad Request) - vue.js

Question

I am trying to save data using Axios API from my front end which is built using the Quasar framework. When I am sending the API request it is responding 400 (Bad Request). SO far what have tried is given in below. I am new to this Framework. So if anyone can help me with this and suggest any good tutorial for learning Quasar then it will be much more helpful for me.
<template>
<q-page>
<div class="row q-col-gutter-sm q-ma-xs q-mr-sm">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<q-card
flat
bordered
class
>
<q-card-section>
<div class="text-h6">Add Style Status</div>
</q-card-section>
<q-separator inset></q-separator>
<q-card-section>
<q-form>
<q-list>
<!-- <q-item>
<q-item-section>
<q-input
dense
outlined
v-model="styleStatus.styleStatusId"
label="Style Status Id"
/>
</q-item-section>
</q-item> -->
<q-item>
<q-item-section>
<q-input
dense
outlined
v-model="styleStatus.statusName"
label="Style Status Name"
/>
</q-item-section>
</q-item>
<q-card-actions
align="right"
class="text-teal"
>
<q-btn
:label="styleStatus.styleStatusId==='' ? 'Save' : 'Update' "
type="submit"
color="positive"
v-close-popup
:disabled="!styleStatus.statusName"
icon-right="save"
#click="addNewStyleStatus()"
/>
</q-card-actions>
</q-list>
</q-form>
</q-card-section>
</q-card>
</div>
</div>
</q-page>
</template>
<script>
export default {
data () {
return {
filter: '',
mode: 'list',
styleStatus: {
styleStatusId: '',
statusName: ''
},
pagination: {
rowsPerPage: 10
},
model: null,
data: this.data
}
},
methods: {
addNewStyleStatus () {
if (this.styleStatus.styleStatusId !== '') {
this.updateData()
} else {
this.saveData()
}
},
saveData () {
this.$axios.post('http://192.168.0.11:8020/api/StyleStatuses', this.styleStatus)
.then(res => {
console.log(res)
this.$q.notify({
color: 'positive',
position: 'top-right',
message: 'Record Inserted Successfully',
icon: 'check_circle'
})
this.getAllStyleStatus()
})
.catch(() => {
this.$q.notify({
color: 'negative',
position: 'top-right',
message: 'Oooops!! something was wrong.',
icon: 'report_problem'
})
})
},
updateData () {
this.$axios.put('http://192.168.0.11:8020/api/StyleStatuses/', this.styleStatus)
.then(res => {
this.$q.notify({
color: 'positive',
position: 'top-right',
message: 'Record Updated Successfully',
icon: 'check_circle'
})
this.styleStatus = {}
this.getAllStyleStatus()
})
.catch(() => {
this.$q.notify({
color: 'negative',
position: 'top-right',
message: 'Oooops!! something was wrong.',
icon: 'report_problem'
})
})
},
editData (x) {
this.styleStatus = x.row
}
}
}
</script>
<style scoped></style>