Livewire - выбор Bootstrap без рендеринга
Я часами бьюсь над этим, я просто не могу заставить работать bootstrap-select внутри компонента livewire, поэтому я постараюсь уточнить свой сценарий и надеюсь, что кто-то может мне помочь. У меня есть проект laravel с использованием этого adminlte, поэтому мой код:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Затем у меня есть страница A, на которой я включаю компонент livewire, который, кстати, является модальным для начальной загрузки.
@livewire('new')
Внутри моего app.scss у меня есть: (я установил выбор начальной загрузки с помощью npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
И внутри моего app.js у меня есть:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
После этого я зашел в свой файл клинка livewire и попытался использовать пример «Выбрать / отменить выбор всех параметров»:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
но ничего не происходит, поэтому я обнаружил эту ссылку и использовал предложенное решение, но результат тот же.
Может ли кто-нибудь указать мне правильное направление? Я просто не знаю, что мне не хватает, я также пробовал другие ссылки, но если я помещу все сюда, это будет длинный вопрос.
Спасибо за ваше время
Ответы
Из того, что вы разместили здесь, проблема не совсем ясна. Используя опубликованные вами фрагменты, мы не можем точно определить, в чем проблема. Всегда лучше включать минимальный код для воспроизведения проблемы, чтобы мы могли легко найти решение для вас и других, кто может наткнуться на нее. но я все равно попробую и отвечу на твой вопрос.
загружен какой-то блейд-файл с необходимыми библиотеками 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: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Просмотр компонентов 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 также обновил BootstrapSelectMultiple и посмотрите его в действии.