Livewire-Bootstrap选择不呈现 [英] Livewire - Bootstrap select not rendering
问题描述
我为此花了好几个小时的时间，我似乎无法将bootstrap-select放在一个livewire组件中，所以我将尝试针对我的情况，并希望有人可以帮助我.我有一个使用此管理的laravel项目，所以我的代码是:
I´m struglling for hours on this, i just can´t seem to put the bootstrap-select working inside a livewire component, so i´ll try to be specific on my scenario and hopping someone could help me. I have a laravel project using this adminlte, so my code is:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
然后，我有我的 A页，其中包括livewire组件，它是一种引导程序模式.
Then, i have my page A where i´m including the livewire component which by the way it´s a bootstrap modal.
@livewire('new')
在我的app.scss内部，我有:(我使用npm安装了bootstrap select)
Inside my app.scss i have:(i installed the bootstrap select with npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
在我的app.js中，我有:
And inside my app.js i have:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
此后，我转到我的livewire刀片文件，并尝试使用示例选择/取消选择所有选项:
After this, i went to my livewire blade file and tried to use the example 'Select/deselect all options:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
但没有任何反应，所以我发现了此链接并使用给出的解决方案，但结果相同.
but nothing happens, so i discovered this link and used the solution that is given but the result is the same.
有人能指出我正确的方向吗?我只是不知道我在想什么，我也尝试了其他链接，但是如果我把所有内容都放在这里，那将是一个漫长的问题.
Could anyone point me in the right direction? i just don´t know what am i missing, i also tried other links but if i put everything here it´s gonna be a long question.
感谢您的时间
推荐答案
从您在此处发布的内容来看，问题还不太清楚.使用您发布的摘录，我们无法真正跟踪问题出在哪里.始终最好包含最少的代码来重现此问题，以便我们为您和其他可能偶然发现此问题的人轻松找到解决方案.但我还是去试试吧，无论如何都要回答你的问题.
From what you have posted here the problem is not quite clear. with the snippets you posted we cant really track where the issue is. it's always best to include the minimal code to reproduce the issue so we could easily find a solution for you and others who might stumble upon it. but i'm gonna give it a go and answer your question anyways.
一些刀片文件，其中装有必要的库 welcome.blade.php
some blade file with necessary libraries loaded 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/bootstrap-select@1.13.14/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/bootstrap-select@1.13.14/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 和看到它的实际效果.
Playaround updated as well BootstrapSelectMultiple and see it in action.
这篇关于Livewire-Bootstrap选择不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
