Livewire - Bootstrap sélectionnez pas de rendu
Je me débat pendant des heures là-dessus, je n'arrive pas à mettre le bootstrap-select fonctionnant dans un composant livewire, donc je vais essayer d'être précis sur mon scénario et sauter quelqu'un pourrait m'aider. J'ai un projet laravel utilisant cet administrateur, donc mon code est:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Ensuite, j'ai ma page A où j'inclus le composant livewire qui d'ailleurs est un modal bootstrap.
@livewire('new')
Dans mon app.scss j'ai: (j'ai installé le bootstrap select avec npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Et dans mon app.js, j'ai:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Après cela, je suis allé à mon fichier lame livewire et j'ai essayé d'utiliser l'exemple `` Sélectionner / désélectionner toutes les options:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
mais rien ne se passe, alors j'ai découvert ce lien et utilisé la solution qui est donnée mais le résultat est le même.
Quelqu'un pourrait-il m'indiquer la bonne direction? Je ne sais juste pas ce qui me manque, j'ai aussi essayé d'autres liens mais si je mets tout ici, ce sera une longue question.
Merci pour votre temps
Réponses
D'après ce que vous avez publié ici, le problème n'est pas tout à fait clair. avec les extraits que vous avez publiés, nous ne pouvons pas vraiment savoir où se situe le problème. il est toujours préférable d'inclure le code minimal pour reproduire le problème afin que nous puissions facilement trouver une solution pour vous et pour ceux qui pourraient tomber dessus. mais je vais essayer de répondre à ta question de toute façon.
un fichier lame avec les bibliothèques nécessaires chargé 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 de composant Livewire: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Vue des composants 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 mis à jour ainsi BootstrapSelectMultiple et le voir en action.