Los formularios son los los componentes empleados por excelencia para obtener datos por parte del usuario, en Laravel Inertia, los podemos usar perfectamente manteniendo el esquema clásico de Laravel en el servidor, pero, usando Vue con Inertia desde el cliente
Laravel Inertia no es más que un scaffolding o esqueleto para Laravel, que agrega funcionalidades a un proyecto en Laravel para poder integrar Vue como tecnología del cliente, con Laravel, como tecnología en el servidor.
En Laravel, en un controlador que trabaja con las categorías, vamos a crear los métodos para presentar el componente en Vue, mediante la función de inertia() en vez de la función clásica de view() que permite renderizar un componente en Vue.
Y la función de store, para almacenar los datos de la categoría en la base de datos; es decir, crear la categoría:
app/Http/Controllers/Dashboard/CategoryController.php
<?php
namespace App\Http\Controllers\Dashboard;
use App\Http\Controllers\Controller;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
public function create()
{
return inertia("Dashboard/Category/Create");
}
public function store(Request $request)
{
Category::create(
[
'title' => request('title'),
'slug' => request('slug'),
]
);
dd($request->all());
}
}Se crea el formulario con sus v-model respectivos y proceso el submit para enviar el formulario al método anterior:
resources/js/Pages/Dashboard/Category/Create.vue
<template>
<form @submit.prevent="submit">
<label for="">Title</label>
<input type="text" v-model="form.title" />
<label for="">Slug</label>
<input type="text" v-model="form.slug" />
<button type="submit">Send</button>
</form>
</template>Para el apartado de script, usamos la función de useForm() con la cual nos permite manejar de una manera sencilla el formulario, es un helper que, facilita el manejo de errores y estado del formulario en general:
array:10 [
"title" => "Test"
"slug" => "test-slug"
"isDirty" => true
"errors" => []
"hasErrors" => false
"processing" => false
"progress" => null
"wasSuccessful" => false
"recentlySuccessful" => false
"__rememberable" => true
]Finalmente, tenemos el uso de las funciones get, post, put, path o delete, mediante el objeto de Inertia en JavaScript que usamos para enviar el formulario:
<script>
import { Inertia } from "@inertiajs/inertia";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
setup() {
const form = useForm({
title: null,
slug: null,
});
function submit() {
Inertia.post(route("category.store"), form);
}
return { form, submit };
},
};
</script>Este material forma parte de mi curso completo sobre Laravel Inertia.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter