Select2 en Laravel Livewire

arrow_back Blog

Implementar Select2 en Laravel Livewire es sencillo, a continuación te muestro un ejemplo completo paso a paso.

Antes de empezar, si tienes dudas acerca del trabajo con formularios en Laravel Livewire no te pierdas esta entrada.

Select2 es una pequeña librería JavaScript que nos permite crear campos de selección avanzados con muy poco código. Utilizar Select2 en Laravel Livewire no es complejo, pero hay que entender algunas cosas para que nuestros campos de selección no pierdan toda la funcionalidad que Select2 nos ofrece.

Componente para Select2 en Laravel Livewire

Lo primero que vamos a hacer es crear un componente Livewire que represente un sencillo formulario.

Hasta aquí todo bien, un sencillo formulario con Laravel Livewire que mostrará un listado de usuarios en un campo de selección y un campo nombre.

El primer problema que aparece al trabajar con Select2 en Laravel Livewire es que cada vez que un campo de nuestro formulario se actualiza toda la funcionalidad de los campos de selección con Select2 desaparece y pasa a convertirse en un campo de selección simple.

Campos de selección no dependientes con Select2 en Laravel Livewire

Esta sería la opción más fácil de gestionar ya que no tenemos campos de selección dependientes de otros campos. Para hacer que este tipo de campos no se vean afectados por las actualizaciones de Livewire lo más sencillo es utilizar la directiva wire:ignore de la siguiente forma.

Si te fijas en el div contenedor de nuestro campo Select2 verás que ahora estamos utilizando la directiva wire:ignore, gracias a la cual nuestro campo no se verá afectado por las actualizaciones de Livewire.

Campos de selección dependientes con Select2 en Laravel Livewire

Ahora viene quizá lo más complicado, debemos hacer algo para que cuando los datos de nuestro componente se actualicen, nuestros campos Select2 sigan trabajando de la misma forma. Ese algo es hidratar la respuesta que retorne nuestro componente, para ello, debemos definir el método hydrate en él y comunicarnos con nuestro código JS.

Para conseguirlo, vamos a modificar nuestro componente añadiendo el siguiente método.

Cada vez que nuestro componente se actualice, el evento select2 será emitido al cliente, ahora sólo debemos capturarlo y actualizar nuestros campos Select2 para que no pierdan su funcionalidad.

Gracias a window.livewire.on('select2') podremos escuchar el evento de nuestro componente Livewire y hacer que nuestros campos Select2 sigan manteniendo su aspecto y funcionalidad. Además, gracias a este hack, podemos eliminar la directiva wire:ignore si lo deseamos, ya no es necesaria.

Cursosdesarrolloweb Cursosdesarrolloweb

Cursosdesarrolloweb es una plataforma educativa con cursos y tutoriales en texto y vídeo.

Términos y condiciones Política de privacidad Formulario de contacto

Copyright 2022 © Todos los derechos reservados.

Contacto