Vuetify v-form post does not send data - node.js

Question

Forgive me for the English of the Translator :)
I created a basic form to see if I get data in my API using vuetify however, when submitting the data the v-select data is not sent and I can not understand the reason, since in general the examples of these forms do not really make a request POST, 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 the v-text-field I get in the API node, but the one in the v-select does not:
Form screen:
API log screen:

Answer 1

On the<v-select> component you have defined the return-object and item-value="id" props. Using the return-object is overriding the item-value by returning the entire object from the v-select component instead of just the id. In this case you could just remove the return-object prop from the <v-select> component and that will fix your issue.
<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 <------REMOVE THIS!!!
value="id"
></v-select>
Vuetify v-select docs: https://vuetifyjs.com/en/components/selects
Another option instead of removing the return-object prop could be to modify your API endpoint to expect an object rather than an int.
Also, I would not recommend using the "method" and "action" attributes on the <v-form> component. Instead, put a click event handler on the submit button of the form that calls a method. The method should then grab the data and send it to the API endpoint via an AJAX call.
On the Form Component
Before: <v-form method="post" action="http://127.0.0.1:3000/produtos">
After: <form #submit.prevent>
On the Button Component
Before: <v-btn color="warning" type="submit">Submit</v-btn>
After: <v-btn color="warning" #click="submit">Submit</v-btn>
In the methods have a function do something like this (used axios in my example, not sure what your project is using):
methods: {
submit () {
let data = { name: this.name, selectPessoa: this.selectPessoa }
axios.post('http://127.0.0.1:3000/produtos', data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}