Livewire-引导选择不渲染

提问者：小点点

Livewire-引导选择不渲染

我为此绞尽脑汁了好几个小时，我似乎无法将引导选择放在livewire组件中工作，因此我将尝试具体说明我的场景，并希望有人能帮助我。我有一个使用此adminlte的laravel项目，因此我的代码是：

网状物php

Route::livewire('/new','new')->layout('adminlte::page');

然后，我有我的页面A，其中包括livewire组件，顺便说一下，它是一个引导模式。

@livewire('new')

在我的应用程序里面。SCS我有：（我用npm安装了引导选择）

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-select/sass/bootstrap-select.scss';

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

之后，我转到我的livewire刀片文件，并尝试使用示例“选择/取消选择所有选项：

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

但是什么也没发生，所以我发现了这个链接，并使用了给出的解决方案，但结果是一样的。

谁能给我指一下正确的方向吗？我只是不知道我错过了什么，我也尝试了其他链接，但如果我把所有的东西都放在这里，这将是一个很长的问题。

谢谢你抽出时间

共1个答案

匿名用户

从你在这里发布的内容来看，这个问题并不十分清楚。根据您发布的片段，我们无法真正跟踪问题所在。最好包含最少的代码来重现问题，这样我们就可以轻松地为您和其他可能偶然发现问题的人找到解决方案。但我还是要试一下回答你的问题。

一些刀片文件加载了必要的库，欢迎使用。刀身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>

玩乐更新以及BootstrapSelect多重，并看到它在行动。