Tenho o aplicativo Laravel 11 / vuejs 3 / element-plus 2.9.5". Solicito que o formulário seja salvo a partir do meu arquivo vue:
const onSubmit = () => {
console.log(editMode.value)
if (editMode.value) {
console.log(form.title) // I SEE THIS MESSAGE
const updateTask = async () => {
// BUT I DO NOT SEE THESE MESSAGES BELOW_AND_NO_REQUEST_TO_SERVER
console.log('form.title::')
console.log(form.title)
console.log('form.id::')
console.log(form.id)
const formData = new FormData();
formData.append('title', form.title);
...
formData.append("_method", 'PUT');
try {
await router.post(router('admin.tasks.update', form.id), formData, {
preserveUrl: true,
preserveState: true,
preserveScroll: true,
onSuccess: (page) => {
console.log('UPDATE page::')
console.log(page)
resetFormData();
Swal.fire({
toast: true,
icon: "success",
position: "top-end",
showConfirmButton: false,
title: page.props.flash.success
});
}
})
console.log('AFTER UPDATE::')
} catch (err) {
console.log(err)
}
}
}// editMode.value
} // const onSubmit = () => {
Encontrei este exemplo na rede - suponha que eu precise fazer uma solicitação assíncrona?
Qual código está correto?
Tive a ideia: na verdade, não preciso definir o método updateTask ou usar async na chamada do método de solicitação:
BLOCO ATUALIZADO:
Então eu refiz onSubmit:
const onSubmit = () => {
if (editMode.value) {
console.log('form.id::')
console.log(form.id)
const formData = new FormData();
formData.append('title', form.title);
formData.append('task_category_id', form.task_category_id);
formData.append('priority', form.priority);
formData.append('content', form.content);
formData.append('completed', form.completed);
formData.append('deadline_at', form.deadline_at);
formData.append("_method", 'PUT');
router.post(router('admin.tasks.update', form.id), formData, {
preserveUrl: true,
preserveState: true,
preserveScroll: true,
onSuccess: (page) => {
console.log('UPDATE page::')
console.log(page)
resetFormData();
Swal.fire({
toast: true,
icon: "success",
position: "top-end",
showConfirmButton: false,
title: page.props.flash.success
});
}
})
console.log('AFTER UPDATE::')
}// editMode.value
} // const onSubmit = () => {
Mas recebi o erro:
O que é esse erro e como ele pode ser corrigido?
updateTask
não será executado a menos que você chame a expressão de funçãoApenas uma observação: router.post não retorna uma promessa e, portanto, não é afetado por ela,
await
então você pode remover a expressão de função completamente.Você já está aplicando
onSuccess
o que será acionado depois que o roteador for postado.