submit form with vuejs

0

 I'mtryingtosubmitthisform,buttheerroratthetimeofdoingthepost.Myobjectisemptysotheapidoesnotletinsertinthedatabaseandtheerror.Iwouldlikehelptoknowwhytheformdataisnotbeingallocatedinmyproductobject.Whyisitgoingempty?I'mabeginner,thankyou!

    
asked by anonymous 30.04.2018 / 03:48

1 answer

0

I'll tell you what I did, first I performed a clean installation of a new project with the command vue init webpack my-project .

Then I copied the code sent in the images (which is an advice here, do not post images but the code, so that it is easier for people to help solve the problem), I installed Vue-resource , as I presume it's what you're using.

In order to do POST, I created a mock in MockAPI with the route products and the same JSON that you are sending in form, and apparently it's working.

<template>
  <div class="formup">
    <h1>Cadastro de Produtos</h1>
    <form class="createform" v-on:submit.prevent="insert">
      <input type="text" v-model="produto.codigoDeBarra"
      placeholder="Código de Barra" required="required" />
      <br>
      <input type="text" v-model="produto.estoque"
      placeholder="Quantidade" required="required" />
      <br>
      <input type="text" v-model="produto.nome"
      placeholder="Descrição do produto" required="required" />
      <br>
      <input type="text" v-model="produto.valorUn"
      placeholder="Valor uniário" required="required" />
      <br>
      <button type="submit" class="btn btn-primary btn-block btn-large"
      >Enviar</button>
    </form>
  </div>
</template>

<script>
const url = 'https://5ae67b7736a18b00144e39a8.mockapi.io/produtos'

export default {
  name: 'CreateProducts',
  data () {
    return {
      produto: {
        nome: '',
        codigoDeBarra: '',
        estoque: '',
        valorUn: ''
      }
    }
  },
  methods: {
    insert () {
      console.log(this.produto)

      this.$http.post(url, this.produto)
        .then((response) => {
          console.log(response, 'funcionou')
        })
        .catch((error) => {
          console.log(error, 'nao funcionou')
        })
    }
  }
}
</script>

Post-POST response result:

Try this information if you are experiencing problems yet, it may be something that is happening on your back end that you are using or some other part of the project that may be affecting this for some reason, as well as whether you are fact using the Vue-resouce or not, etc.

    
30.04.2018 / 04:26