submit form with vuejs

Question

I am trying to submit this form, but of the error when making the post. My object is empty so the api does not let insert in the database and the error. I would like help to know why the form data is not being assigned to my product object. Why is it going empty? I’m a beginner in Vue, thank you!

Answer 1

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 (what is here a advice, do not post images and yes the code, so that it is easier for people to help solve the problem), I installed the Vue-Resource, because I assume that’s what you’re using.

Done this, to perform the POST, I created a mock on Mockapi with the route products and the same JSON that you are sending in the form, and apparently is 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>

Result of the response after the POST:

Try this information, if there are any problems yet, could be something going on in 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 actually using Vue-resouce or not, etc.