Livewire - Bootstrap select no renderizado
Estoy luchando durante horas con esto, parece que no puedo poner el bootstrap-select funcionando dentro de un componente de livewire, así que intentaré ser específico en mi escenario y espero que alguien pueda ayudarme. Tengo un proyecto de laravel usando este administrador, entonces mi código es:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Luego, tengo mi página A donde estoy incluyendo el componente livewire que por cierto es un modal de bootstrap.
@livewire('new')
Dentro de mi app.scss tengo: (instalé el bootstrap select con npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Y dentro de mi app.js tengo:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Después de esto, fui a mi archivo blade livewire e intenté usar el ejemplo 'Seleccionar / deseleccionar todas las opciones:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
pero no pasa nada, así que descubrí este enlace y utilicé la solución que se proporciona, pero el resultado es el mismo.
¿Alguien podría señalarme en la dirección correcta? No sé qué me estoy perdiendo, también probé otros enlaces pero si pongo todo aquí será una pregunta larga.
Gracias por tu tiempo
Respuestas
Por lo que ha publicado aquí, el problema no está del todo claro. con los fragmentos que publicó, no podemos rastrear realmente dónde está el problema. Siempre es mejor incluir el código mínimo para reproducir el problema para que podamos encontrar fácilmente una solución para usted y otros que puedan tropezar con ella. pero voy a intentarlo y responder a tu pregunta de todos modos.
algún archivo blade con las bibliotecas necesarias cargadas welcome.blade.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
@livewireStyles
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
<!-- Modal -->
//
<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true close-btn">×</span>
</button>
</div>
<div class="modal-body">
<!-- livewire component -->
<livewire:bootstrap-select-multiple />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
@livewireScripts
<script>
$(function () { $('select').selectpicker();
});
</script>
</body>
</html>
Clase de componente Livewire: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Vista de componentes de Livewire: bootstrap-select-multiple.blade.php
<div>
<div class="" wire:ignore id="for-customers">
<select class="form-control show-tick" data-style="btn-primary" title="Select Customer..." multiple wire:model="customers" data-container="#for-customers" data-actions-box="true">
<option value="John Doe">John Doe</option>
<option value="Jane Doe">Jane Doe</option>
<option value="John Wick">John Wick</option>
</select>
</div>
<hr>
Customers List<br>
<ul>
@forelse($customers as $key => $value)
<li>{{$value}}</li><br>
@empty
Currently there are no selected customers.
@endforelse
</ul>
</div>
Playaround actualizado también BootstrapSelectMultiple y véalo en acción.