v-form post does not send data

Question

I created a basic form to see if I receive data in my API using vuetify but when giving Ubmit the v-select data is not sent and I cannot understand the reason, since in general the examples of these forms do not actually make a POST request, follows snippets of the code I’m using:

 <v-form method="post" action="http://127.0.0.1:3000/produtos">
  <v-text-field name="escola" v-model="name" required :rules="nameRules"></v-text-field>
  <v-select
    v-model="selectPessoa"
    :items="pessoas"
    :rules="[v => !!v || 'Item is required']"
    item-value="id"
    item-text="nome"
    label="itens"
    required
    name="pessoa"
    return-object
    value="id"
  ></v-select>
  <v-btn color="warning" type="submit">Submit</v-btn>
</v-form>

Excerpt from javascript code:

data(){
    return { pessoas: [{ id: 1, nome: "sandro" },
                       { id: 2, nome: "haiden" }], 
             name: '',
             selectPessoa: null,
    }
}

The information I type in v-text-field I receive in the Node API, but the v-select API does not:

Form screen

API log screen

Answer 1

Hello,

Your mistake is on that line: value="id" According to the Form Interconnection documentation Vuejs you have to "bind the id to value" that way:

v-bind:value="id" This is how Vue references Id to Element. I think that solves your problem.

Answer 2

Try to create a function to send your data to the API, follow the example:

 <v-form method="post" action="onSubmit()">
  <v-text-field name="escola" v-model="name" required :rules="nameRules"></v-text-field>
  <v-select
    v-model="selectPessoa"
    :items="pessoas"
    :rules="[v => !!v || 'Item is required']"
    item-value="id"
    item-text="nome"
    label="itens"
    required
    name="pessoa"
    return-object
    value="id"
  ></v-select>
  <v-btn color="warning" type="submit">Submit</v-btn>
</v-form>

data(){
    return { pessoas: [{ id: 1, nome: "sandro" },
                       { id: 2, nome: "haiden" }], 
             name: '',
             selectPessoa: null,
    }
},

methods: {
  onSubmit() {
    /* Aqui você envia os dados para a API (this.name e this.selectPessoa)
    Aconselho você a utilizar o Axios para esta tarefa */
  }
}