Vuetify V-Form Post не отправляет данные

Question

Прости меня за английский переводчика:)

Я создал базовую форму, чтобы посмотреть, получаю ли я данные в своем API с помощью vuetify, однако, при отправке данных данные v-select не отправляются иЯ не могу понять причину, так как в общем случае примеры этих форм на самом деле не делают запрос POST, следует фрагментам кода, который я использую:

<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>

Выдержка из кода JavaScript:

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

Информация, которую я набираю в текстовом поле v, получаю в узле API, но в v-select нет:

Экран формы:

Экран журнала API:

Answer 1

Для компонента <v-select> вы определили реквизиты return-object и item-value="id". Использование return-объекта переопределяет значение элемента, возвращая весь объект из компонента v-select вместо просто id. В этом случае вы можете просто удалить опору return-object из компонента <v-select>, и это решит вашу проблему.

<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

Другим вариантом вместо удаления реквизита возвращаемого объекта может быть изменение конечной точки API для ожидания объекта, а не целого.

Кроме того, я бы не рекомендовал использовать атрибуты «method» и «action» для компонента <v-form>. Вместо этого поместите обработчик события click в кнопку отправки формы, которая вызывает метод. Затем метод должен получить данные и отправить их в конечную точку API с помощью вызова AJAX.

В компоненте формы

До: <v-form method="post" action="http://127.0.0.1:3000/produtos">

После: <form @submit.prevent>

На компоненте кнопки

До: <v-btn color="warning" type="submit">Submit</v-btn>

После: <v-btn color="warning" @click="submit">Submit</v-btn>

В методах есть функция, которая делает что-то вроде этого (в моем примере использовали axios, не уверен, что использует ваш проект):

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);
    });
  }
}