Vue.js component form sends null values - vue.js

Question

the model is Entity. No errors are thrown. The form gets submitted and a new Entity is saved. However, the description and title are both recorded as 'nil'. to here is src/components/NewEntity.vue:
<template>
<div class="entities">
<h1>Add Entity</h1>
<div class="form">
<div>
<input type="text" name="title" placeholder="TITLE" v-model="title">
</div>
<div>
<textarea rows="15" cols="15" placeholder="DESCRIPTION" v-model="description"></textarea>
</div>
<div>
<button class="app_entity_btn" #click="addEntity">Add</button>
</div>
</div>
</div>
</template>
<script>
import EntitiesService from '#/services/EntitiesService'
export default {
name: 'NewEntity',
data () {
return {
title: '',
description: ''
}
},
methods: {
async addEntity () {
await EntitiesService.addEntity({
title: this.title,
description: this.description
})
this.$router.push({ name: 'Entities' })
}
}
}
</script>
here is where the script imports from (for some reason SO would not initially allow me to include Services/Api.js):
services/EntitiesServices:
import Api from '#/services/Api'
export default {
fetchEntities () {
return Api().get('/entities')
},
addEntity (params) {
return Api().post('entities', {
title: params.title,
description: this.description
})
}
services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}

Answer 1

OG Solution by cperez
Depending on your server, you need to 'stringify' your parameters object within your post function in two possible ways. If your server accepts JSON, then:
return Api().post('entities',
JSON.stringify({
title: params.title,
description: this.description
})
)
If you server doesn't accept JSON, you have to convert the object into encoded URL parameters with the querystring module:
var qs = require('querystring');
return Api().post('entities',
qs.stringify({
title: params.title,
description: this.description
})
)