Livewire - Bootstrap chọn không hiển thị
Tôi đang loay hoay hàng giờ về vấn đề này, dường như tôi không thể đặt bootstrap-select hoạt động bên trong một thành phần livewire, vì vậy tôi sẽ cố gắng cụ thể hóa kịch bản của mình và nhờ ai đó có thể giúp tôi. Tôi có một dự án laravel sử dụng adminlte này , vì vậy mã của tôi là:
web.php
Route::livewire('/new','new')->layout('adminlte::page');
Sau đó, tôi có trang A của mình , nơi tôi đang bao gồm thành phần livewire, nhân tiện nó là phương thức bootstrap.
@livewire('new')
Bên trong app.scss của tôi, tôi có: (tôi đã cài đặt bootstrap select với npm)
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';
Và bên trong app.js của tôi, tôi có:
require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Sau đó, tôi đã truy cập tệp phiến livewire của mình và cố gắng sử dụng ví dụ 'Chọn / bỏ chọn tất cả các tùy chọn:
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
nhưng không có gì xảy ra, vì vậy tôi đã phát hiện ra liên kết này và sử dụng giải pháp được đưa ra nhưng kết quả vẫn như cũ.
Ai có thể chỉ cho tôi đi đúng hướng? Tôi chỉ không biết mình còn thiếu gì, tôi cũng đã thử các liên kết khác nhưng nếu tôi đặt mọi thứ ở đây thì sẽ là một câu hỏi dài.
Cảm ơn bạn đã dành thời gian
Trả lời
Từ những gì bạn đã đăng ở đây, vấn đề là không hoàn toàn rõ ràng. với các đoạn mã bạn đã đăng, chúng tôi không thể thực sự theo dõi vấn đề ở đâu. tốt nhất là luôn bao gồm mã tối thiểu để tái tạo vấn đề để chúng tôi có thể dễ dàng tìm ra giải pháp cho bạn và những người khác có thể gặp phải vấn đề này. nhưng tôi sẽ thử và trả lời câu hỏi của bạn.
một số tệp phiến với các thư viện cần thiết được tải 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>
Lớp thành phần Livewire: BootstrapSelectMultiple.php
<?php
use Livewire\Component;
class BootstrapSelectMultiple extends Component
{
public $customers = [];
public function render()
{
return view('bootstrap-select-multiple');
}
}
Chế độ xem thành phần 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 cũng được cập nhật BootstrapSelectMultiple và xem nó hoạt động.