Livewire - Bootstrap oluşturmamayı seç
Bu konuda saatlerce uğraşıyorum, sadece bootstrap-select'i bir livewire bileşeninin içine koyamıyorum, bu yüzden senaryomda spesifik olmaya çalışacağım ve birinin bana yardım edebileceğini umuyorum. Bu adminlte kullanan bir laravel projem var , bu yüzden kodum:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Ardından, bir önyükleme modeli olan livewire bileşenini dahil ettiğim A sayfam var.
@livewire('new')
App.scss'imin içinde: (bootstrap select'i npm ile yükledim)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Ve app.js dosyamın içinde:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Bundan sonra, livewire blade dosyama gittim ve 'Tüm seçenekleri seç / seçimini kaldır:' örneğini kullanmaya çalıştım.
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
ama hiçbir şey olmuyor, bu yüzden bu bağlantıyı keşfettim ve verilen çözümü kullandım ama sonuç aynı.
Biri beni doğru noktaya yönlendirebilir mi? Sadece neyi kaçırdığımı bilmiyorum, diğer bağlantıları da denedim ama her şeyi buraya koyarsam uzun bir soru olacak.
Zaman ayırdığınız için teşekkürler
Yanıtlar
Buraya yazdıklarınıza göre sorun pek açık değil. Gönderdiğiniz pasajlarla sorunun nerede olduğunu gerçekten takip edemiyoruz. Sorunu yeniden oluşturmak için minimum kodu dahil etmek her zaman en iyisidir, böylece sizin ve bununla karşılaşabilecek diğerleri için kolayca bir çözüm bulabiliriz. ama yine de bir deneyip sorunuzu cevaplayacağım.
welcome.blade.php yüklü gerekli kitaplıkları içeren bazı blade dosyaları
<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 Bileşen Sınıfı: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Livewire Bileşen Görünümü: 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 da BootstrapSelectMultiple güncellendi ve iş başında görün.