Livewire - Bootstrap pilih bukan rendering
Saya berjuang selama berjam-jam untuk hal ini, saya sepertinya tidak dapat menggunakan bootstrap-select yang berfungsi di dalam komponen livewire, jadi saya akan mencoba lebih spesifik pada skenario saya dan melompat seseorang dapat membantu saya. Saya memiliki proyek laravel menggunakan adminlte ini , jadi kode saya adalah:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Kemudian, saya memiliki halaman A saya di mana saya termasuk komponen livewire yang merupakan modal bootstrap.
@livewire('new')
Di dalam app.scss saya, saya punya: (saya menginstal bootstrap pilih dengan npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Dan di dalam app.js saya, saya memiliki:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Setelah ini, saya membuka file blade livewire saya dan mencoba menggunakan contoh 'Pilih / hapus semua opsi:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
tetapi tidak ada yang terjadi, jadi saya menemukan tautan ini dan menggunakan solusi yang diberikan tetapi hasilnya sama.
Adakah yang bisa mengarahkan saya ke arah yang benar? Saya hanya tidak tahu apa yang saya lewatkan, saya juga mencoba tautan lain tetapi jika saya meletakkan semuanya di sini, itu akan menjadi pertanyaan panjang.
Terima kasih atas waktunya
Jawaban
Dari apa yang Anda posting di sini masalahnya tidak begitu jelas. dengan cuplikan yang Anda poskan, kami tidak dapat benar-benar melacak letak masalahnya. yang terbaik adalah selalu menyertakan kode minimal untuk mereproduksi masalah sehingga kami dapat dengan mudah menemukan solusi untuk Anda dan orang lain yang mungkin tersandung. tapi saya akan mencobanya dan menjawab pertanyaan Anda.
beberapa file blade dengan pustaka yang diperlukan dimuat 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>
Kelas Komponen Livewire: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Tampilan Komponen 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 juga memperbarui BootstrapSelectMultiple dan melihatnya beraksi.