En este tutorial, demostraremos cómo usar Select2 con Laravel Livewire. La pila tecnológica incluida en este tutorial es TailwindCSS para CSS, jQuery y Select2 .

 Instalación

  • Instale el paquete Livewire a través de Composer:

composer require livewire/livewire

  • Cree un archivo de diseño de Laravel ( resources/views/layouts/select2.blade.php), estamos extrayendo todo el Javascript y CSS de su respectiva red CDN (El propósito es mantener la configuración del tutorial fácil de seguir. Sin embargo, en su proyecto, le sugerimos que configure Javascript y CSS en la zona):
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Using Select2 with Laravel Livewire</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">


    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>


    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    @livewireStyles
</head>

<body class="bg-gray-200" style="font-family: Nunito;">


<div class="max-w-7xl mx-auto px-4 py-4 sm:py-6 lg:py-8 sm:px-6 lg:px-8 ">
    {{ $slot }}
</div>

@livewireScripts
@stack('scripts')
</body>
</html>

 Trabajando en el componente Livewire

Cree un componente Livewire para trabajar con Select2. Ejecute el siguiente comando desde CLI para generar los archivos de componentes:

php artisan make:livewire Select2

Debería ver dos archivos generados en:

  • app/Http/Livewire/Select2.php
  • resources/views/livewire/select2.blade.php

El archivo app/Http/Livewire/Select2.phpes el archivo de clase del componente, mientras que resources/views/livewire/select2.blade.phpes el archivo de vista.

Vamos a crear contenido para el archivo de clase( app/Http/Livewire/Select2.php):

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Select2 extends Component
{
    public $selected = '';

    public $series = [
        'Wanda Vision',
        'Money Heist',
        'Lucifer',
        'Stranger Things',
    ];

    public function render()
    {
        return view('livewire.select2')
                ->layout('layouts.select2');
    }
}
  • La variable $selectedes para almacenar el valor de selección del usuario.
  • La variable $serieses para proporcionar opciones para la entrada seleccionada.

En la función render(), le indicamos a Livewire que renderice un archivo de vista resources/views/livewire/select2.blade.php utilizando el archivo de diseño en resources/views/layouts/select2.blade.php.

Esta es la forma bastante estándar de usar el componente Livewire.

A continuación, pasaremos a trabajar en la parte Select2 del sistema, que requiere algunos trucos personalizados.

 Trabajar en la vista Livewire

Copie y pegue el contenido del archivo de vista ( resources/views/livewire/select2.blade.php) a continuación y explicaremos las partes clave del archivo de vista en el siguiente paso:

<div>
    <div class="max-w-3xl mx-auto mb-2">
        <div class="bg-white rounded-lg">
            <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
                <div class="text-center">
                    <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
                        Using Select2 with Laravel Livewire
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-3xl mx-auto mb-2">
        <div class="bg-white rounded-lg p-5">

            <div class="grid sm:grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div wire:ignore>
                    <select class="form-control" id="select2">
                        <option value="">Select Option</option>
                        @foreach($series as $item)
                            <option value="{{ $item }}">{{ $item }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    You have selected: <strong>{{ $selected }}</strong>
                </div>
            </div>


        </div>
    </div>

</div>

@push('scripts')

    <script>
        $(document).ready(function () {
            $('#select2').select2();
            $('#select2').on('change', function (e) {
                var data = $('#select2').select2("val");
            @this.set('selected', data);
            });
        });
    </script>

@endpush

El jQuery Select2 manipula el DOM tan pronto como se inicializan y continúa mutando el DOM a medida que interactúa con ellos. Esto hace que sea imposible para Livewire realizar un seguimiento, en este caso, podemos hacer uso de la wire:ignoreetiqueta de Livewire. Esto le dice a Livewire que ignore esta parte de DOM. Eso es lo que ha hecho la siguiente parte del código:

......
<div wire:ignore>
    <select class="form-control" id="select2">
        <option value="">Select Option</option>
        @foreach($series as $item)
            <option value="{{ $item }}">{{ $item }}</option>
        @endforeach
    </select>
</div>
......

Ahora Livewire ha ignorado la parte Select2 del código, por lo que no tiene idea de cómo manejar la $selectedvariable en su clase de componente.

De hecho, todo lo que necesitamos que Livewire sepa es el valor del cuadro de selección que se cambia y a qué valor se ha actualizado. En un caso como este, podemos usar la $thisdirectiva blade especial para establecer el valor fo $selected:

@push('scripts')

    <script>
        $(document).ready(function () {
            $('#select2').select2();
            $('#select2').on('change', function (e) {
                var data = $('#select2').select2("val");
            @this.set('selected', data);
            });
        });
    </script>

@endpush

Eso es lo que hemos hecho en el código anterior. Escuchamos el evento de cambio Select2 a través de jQuery y establecemos el valor de la variable de Livewire a $selectedtravés de la $thisdirectiva blade.

 Finalizando la demostración

La última pieza de la demostración es renderizar el componente Livewire Select2en el navegador, esto se hace simplemente a través del archivo de ruta routes/web.php:

Route::get('/select2', Select2::class);

Ahora inicie un servidor simple a través de Laravel: php artisan servey visite http://127.0.0.1:8000/select2desde su navegador, y debería ver un buen menú desplegable Select2 que funciona.

 código fuente

Si sigue el tutorial paso a paso, obtendrá todo el código fuente en su lugar. Sin embargo, si se siente perezoso o necesita descargar el código fuente completo de nosotros. Puede hacerlo pagándonos una pequeña tarifa. Su apoyo nos permitirá producir tutoriales mejores y más detallados.