1

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': '*'
    }
  })
}
user2799827
  • 1,077
  • 3
  • 18
  • 54
  • What do you get when you dump the request in your store method? – Tomasz Rup Nov 15 '18 at 23:33
  • addEntity method (added above) is supposed to post the data. No errors are thrown, but nothing is passed. both are NULL. And when the record saves, the two values are nil for those attributes. When I view the request in the Network tab of the console, it says "this request has no response data available" – user2799827 Nov 16 '18 at 01:24
  • addEntity posts `this.description` rather than `params.description`. – Roy J Nov 16 '18 at 02:50
  • I have tried `this` and `params` for both of these. hasn't worked for me. – user2799827 Nov 16 '18 at 03:23

1 Answers1

0

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
    })
)
Jackson Baker Ryan
  • 46
  • 5