Livewire - 引导选择不呈现答案

【问题标题】：Livewire - Bootstrap select not renderingLivewire - 引导选择不呈现
【发布时间】：2020-12-11 23:26:29
【问题描述】：

我为此苦苦挣扎了几个小时，我似乎无法将 bootstrap-select 放在 livewire 组件中工作，所以我将尝试具体说明我的情况，并希望有人可以帮助我。我有一个使用this adminlte 的 laravel 项目，所以我的代码是：

web.php

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

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

@livewire('new')

在我的 app.scss 中：（我使用 npm 安装了引导选择）

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

在我的 app.js 中，我有：

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>

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

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

感谢您的宝贵时间

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

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

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

【讨论】：

嗨 BezhanSalleh，我已经发现了我的问题的根源。问题是，我的 livewire 组件是一个从视图调用的引导模式，当您单击按钮时，模式会出现（并且此模式是 livewire 组件）。所以我在这个“母亲”视图中测试了它，并且 bootsratselect 正确地出现了，但在模态中它没有。有趣的是，我所有的刀片文件 @extends('adminlte::page')，所以我的 livewire 路由有 ->layout('adminlte::page');...为什么它没有出现在模态中？问候
@Japa 我已根据您的评论更新了答案。现在 livewire 组件位于引导模式中，并且 Playground 也已更新，因此您可以看到它的运行情况。