Laravel Livewire es un esqueleto para Laravel que permite crear interfaces de usuario interactivas sin escribir JavaScript. Una de sus características principales es su capacidad para manejar formularios y envíos de formularios, ya que, tenemos múltiples métodos y atributos que podemos usar de manera directa para comunicar el frontend con el backend. Con Livewire, es mucho más facil crear formularios complejos con validación y manejo de errores, así como envíos de formularios AJAX sin ningún esfuerzo adicional. De esta forma, Livewire simplifica el proceso de gestión de formularios y sus envíos en las aplicaciones de Laravel.
Para crear un formulario básico en Livewire, primero debes crear un componente Livewire y luego definir las propiedades públicas que contendrán los datos del formulario. Entonces, debes crear un método para manejar el envío del formulario y validar los datos utilizando las funciones de validación de Laravel. Finalmente, debes agregar el marcado HTML del formulario con los atributos wire:model para enlazarlos con las propiedades públicas.
En este artículo, vamos a crear un componente en Livewire, que son la estructura que tenemos que usar para poder aprovechar las bondades principales de Laravel Livewire.
Recuerda que para poder continuar, debes saber como crear un proyecto en Laravel Livewire.
Creamos el componente con:
php artisan make:livewire Dashboard/Category/SaveCreamos la ruta con:
Route::group(['prefix' => 'category'],function () {
Route::get('/create', App\Http\Livewire\Dashboard\Category\Save::class)->name("d-category-create"); // crear
Route::get('/edit/{id}', App\Http\Livewire\Dashboard\Category\Save::class)->name("d-category-edit");// edit
});Y el modelo luce como el siguiente:
class Category extends Model
{
use HasFactory;
protected $fillable=['title','slug','image','text'];
public function posts()
{
return $this->hasMany(Post::class);
}
public function getImageUrl()
{
return URL::asset("images/".$this->image);
}
}En el vista de componente, definimos nuestro formulario para la gestión de las categorías:
<form wire:submit.prevent="submit">
<x-jet-label for="">Título</x-jet-label>
<x-jet-input-error for="title" />
<x-jet-input type="text" wire:model="title" />
<x-jet-label for="">Texto</x-jet-label>
<x-jet-input-error for="text" />
<x-jet-input type="text" wire:model="text" />
<x-jet-button type="submit">Enviar</x-jet-button>
</form>Y en la clase del componente:
namespace App\Http\Livewire\Dashboard\Category;
use App\Models\Category;
use Illuminate\Support\Facades\Log;
use Livewire\Component;
use Livewire\WithFileUploads;
class Save extends Component
{
use WithFileUploads;
public $title;
public $text;
public $image;
public $category;
protected $rules = [
'title' => "required|min:2|max:255",
'text' => "nullable",
'image' => "nullable|image|max:1024",
];
public function mount($id = null)
{
if ($id != null) {
$this->category = Category::findOrFail($id);
$this->title = $this->category->title;
$this->text = $this->category->text;
}
}
public function render()
{
//Log::info("render");
return view('livewire.dashboard.category.save');
}
public function submit()
{
// validate
$this->validate();
// save
if ($this->category){
$this->category->update([
'title' => $this->title,
'text' => $this->text,
]);
$this->emit("updated");
}else{
$this->category = Category::create(
[
'title' => $this->title,
'slug' => str($this->title)->slug(),
'text' => $this->text,
]
);
$this->emit("created");
}
// upload
if($this->image){
$imageName = $this->category->slug . '.' . $this->image->getClientOriginalExtension();
$this->image->storeAs('images', $imageName,'public_upload');
$this->category->update([
'image'=> $imageName
]);
}
}
}Fíjate que en la función de submit manejamos ambos procesos, el de crear y editar según el estado de una categoría que existe solo si estamos en la fase de edición y que inicializamos en la fase del mount del componente.
Estas son las faces de cualquier proceso CRUD y en Livewire son procesos muy directos como ya hemos apreciado.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter