Сообщение Vuetify v-form не отправляет данные
Простите меня за английский язык переводчика :)
Я создал базовую форму, чтобы увидеть, получаю ли я данные в своем 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-text, я получаю в узле API, а информация в v-select — нет:
Экран журнала API:
Ответы 1
В компоненте <v-select> вы определили реквизиты return-object и item-value = "id". Использование возвращаемого объекта переопределяет значение элемента, возвращая весь объект из компонента v-select, а не только идентификатор. В этом случае вы можете просто удалить реквизит 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: https://vuetifyjs.com/en/components/selects
Другой вариант вместо удаления свойства return-object может состоять в том, чтобы изменить конечную точку API, чтобы ожидать объект, а не int.
Также я бы не рекомендовал использовать атрибуты «метод» и «действие» в компоненте <v-form>. Вместо этого поместите обработчик события щелчка на кнопку отправки формы, которая вызывает метод. Затем метод должен получить данные и отправить их в конечную точку 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>
В методах есть функция, делающая что-то вроде этого (в моем примере использовались аксиомы, не уверен, что использует ваш проект):
methods: {
submit () {
let data = { name: this.name, selectPessoa: this.selectPessoa }
axios.post('http://127.0.0.1:3000/produtos', data)
.then(function (response) {
console.info(response);
})
.catch(function (error) {
console.info(error);
});
}
}