Formulario para editar registros en Laravel Inertia con Vue

- Andr茅s Cruz

In english

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 鈥淓nviar鈥 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
        ];
    }
}
Andr茅s Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andr茅s Cruz en Udemy