Livewire - Selezione Bootstrap non rendering
Sto lottando per ore su questo, non riesco proprio a mettere il bootstrap-select funzionante all'interno di un componente livewire, quindi cercherò di essere specifico sul mio scenario e saltare qualcuno potrebbe aiutarmi. Ho un progetto laravel che utilizza questo adminlte, quindi il mio codice è:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Poi, ho la mia pagina A dove sto includendo il componente livewire che tra l'altro è un modal bootstrap.
@livewire('new')
All'interno del mio app.scss ho: (ho installato la selezione bootstrap con npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
E all'interno del mio app.js ho:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Dopo questo, sono andato al mio file blade livewire e ho provato a usare l'esempio 'Seleziona / deseleziona tutte le opzioni:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
ma non succede nulla, quindi ho scoperto questo collegamento e ho usato la soluzione che viene fornita ma il risultato è lo stesso.
Qualcuno potrebbe indicarmi la giusta direzione? Solo non so cosa mi manchi, ho provato anche altri link ma se metto tutto qui sarà una domanda lunga.
Grazie per il tuo tempo
Risposte
Da quanto hai postato qui il problema non è del tutto chiaro. con gli snippet che hai pubblicato non possiamo davvero tracciare dove si trova il problema. è sempre meglio includere il codice minimo per riprodurre il problema in modo da poter trovare facilmente una soluzione per te e per altri che potrebbero incappare in esso. ma ci proverò e risponderò comunque alla tua domanda.
alcuni file blade con le librerie necessarie caricati 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>
Classe componente Livewire: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Visualizzazione componenti 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 aggiornato anche BootstrapSelectMultiple e vederlo in azione.