Livewire - Bootstrap-Auswahl nicht rendern
Ich habe stundenlang Probleme damit, ich kann einfach nicht scheinen, dass die Bootstrap-Auswahl in einer Livewire-Komponente funktioniert, also werde ich versuchen, mein Szenario genau zu definieren, und jemand könnte mir helfen. Ich habe ein Laravel-Projekt, das diesen Administrator verwendet. Mein Code lautet also:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Dann habe ich meine Seite A, wo ich die Livewire-Komponente einbinde, die übrigens ein Bootstrap-Modal ist.
@livewire('new')
In meiner app.scss habe ich: (ich habe die Bootstrap-Auswahl mit npm installiert)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Und in meiner app.js habe ich:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Danach ging ich zu meiner Livewire-Blade-Datei und versuchte, das Beispiel 'Alle Optionen auswählen / abwählen:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
aber nichts passiert, also habe ich diesen Link entdeckt und die angegebene Lösung verwendet, aber das Ergebnis ist das gleiche.
Könnte mich jemand in die richtige Richtung weisen? Ich weiß nur nicht, was ich vermisse, ich habe auch andere Links ausprobiert, aber wenn ich alles hier platziere, wird es eine lange Frage sein.
Danke für deine Zeit
Antworten
Nach dem, was Sie hier gepostet haben, ist das Problem nicht ganz klar. Mit den von Ihnen geposteten Schnipsel können wir nicht wirklich verfolgen, wo das Problem liegt. Es ist immer am besten, den minimalen Code anzugeben, um das Problem zu reproduzieren, damit wir leicht eine Lösung für Sie und andere finden können, die möglicherweise darauf stoßen. aber ich werde es versuchen und deine Frage trotzdem beantworten.
Einige Blade-Dateien mit den erforderlichen Bibliotheken wurden geladen. 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>
Livewire-Komponentenklasse: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Livewire-Komponentenansicht: 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 wurde ebenfalls aktualisiert. BootstrapSelectMultiple und sehen es in Aktion.