1

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');

Then, i have my page A where i´m including the livewire component which by the way it´s a bootstrap modal.

@livewire('new')

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';

And inside my app.js i have:

require('./bootstrap');
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');

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.

Thanks for you time

4

1 回答 1

0

从您在此处发布的内容来看，问题还不是很清楚。使用您发布的片段，我们无法真正追踪问题所在。最好包含重现问题的最少代码，这样我们就可以轻松地为您和可能偶然发现它的其他人找到解决方案。但我会试一试并回答你的问题。

一些加载了必要库的刀片文件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并查看它的实际效果。

于 2020-08-25T11:51:41.577 回答