Select2 en Laravel Livewire

Fecha de publicación: julio 19, 2021

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

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.

¿Quieres acceder a más de 150 cursos de PHP y JavaScript?

¿Quieres ganar tiempo en tus desarrollos con nuestros proyectos descargables?


Vue, Laravel, Inertia, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Hazte Premium y consigue acceso completo
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register
¡YA ESTÁ AQUÍ HALLOWEEN! LA MEJOR PROMOCIÓN DEL AÑO
¡HALLOWEEN 2021!