Los formularios son una herramienta común utilizada para recopilar información de los usuarios. En el proceso de actualizar, un formulario puede ser utilizado para actualziar información que se encuentra almacenado en la base de datos; el proceso de actualizar a menudo comienza cuando un usuario selecciona desde un listado de registros el registro que quiere actualizar y con esto, va al formulario de edición que desde base ya cuenta con el identificador del registro que el usuario queire modificar, este identificador generalmente esta establecido en la URL; como todo formulario, puede tener presente cualquier tipo de campo soportado en HTML
Una vez que el usuario ha editado la información del formulario, puede enviar el formulario haciendo clic en un botón "Actualizar" o “Enviar” para que Laravel se encargue de las validaciones y posterior guardado en la base de datos si los datos son correctos o mostrar los errores de validación.
Formularios de edición en Inertia
Ya conocemos cómo manejar un formulario básico en Inertia para crear registros; pero, qué pasa si lo que necesitas es la edición; para eso, podemos emplear prácticamente el mismo esquema que el presentado anteriormente, pero con algunas modificaciones.
Desde el controlador de edición en Laravel, pasamos la referencia al registro:
public function edit(Category $category)
{
return inertia("Dashboard/Category/Edit", compact('category'));
}Por lo tanto, ya tenemos un registro que recibir desde el componente en Vue:
props: {
errors: Object,
category: Object,
},Y con la referencia a la categoría, actualizamos el formulario mediante el v-model:
setup(props) {
const form = useForm({
id: props.category.id,
title: props.category.title,
slug: props.category.slug,
});Y ahora, cambiamos la ruta del formulario de tipo post a put o patch:
function submit() {
Inertia.put(route("category.update",form.id), form);
}Finalmente, queda como:
<template>
<app-layout >
<jet-form-section @submitted="submit" class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<template #title> Create Category </template>
<template #description> Create a Category </template>
<template #form>
<div class="col-span-6">
<jet-label>Title</jet-label>
<jet-input class="w-full" type="text" v-model="form.title" />
<jet-input-error :message="errors.title" />
</div>
<div class="col-span-6">
<jet-label value="Slug" />
<jet-input class="w-full" type="text" v-model="form.slug" />
<jet-input-error :message="errors.slug" />
</div>
</template>
<template #actions>
<jet-button type="submit">Send</jet-button>
</template>
</jet-form-section>
</app-layout>
</template>
<script>
import { Inertia } from "@inertiajs/inertia";
import { useForm } from "@inertiajs/inertia-vue3";
// import AppLayout from "../../../Layouts/AppLayout"
import AppLayout from "@/Layouts/AppLayout";
import JetInput from "@/Jetstream/Input";
import JetInputError from "@/Jetstream/InputError";
import JetLabel from "@/Jetstream/Label";
import JetButton from "@/Jetstream/Button";
import JetFormSection from "@/Jetstream/FormSection";
export default {
components: {
AppLayout,
JetInput,
JetInputError,
JetLabel,
JetButton,
JetFormSection,
},
props: {
errors: Object,
category: Object,
},
setup(props) {
const form = useForm({
id: props.category.id,
title: props.category.title,
slug: props.category.slug,
});
function submit() {
Inertia.put(route("category.update",form.id), form);
}
return { form, submit };
},
};
</script>
Y en el controlador para actualizar:
public function update(Put $request, Category $category)
{
$category->update($request->validated());
}
Con su validador:
<?php
namespace App\Http\Requests\Category;
use Illuminate\Foundation\Http\FormRequest;
class Put extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
public function prepareForValidation()
{
if(str($this->slug)->trim() == "")
$this->merge([
'slug' => str($this->title)->slug()
]);
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
"title" => "required|min:5|max:255",
"slug" => "required|min:5|max:255|unique:categories,slug,".$this->route("category")->id
];
}
}
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter