Livewire - выбор Bootstrap без рендеринга

Я часами бьюсь над этим, я просто не могу заставить работать bootstrap-select внутри компонента livewire, поэтому я постараюсь быть конкретным в моем сценарии и надеюсь, что кто-то может мне помочь. У меня есть проект laravel, в котором используется this adminlte, поэтому мой код:

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>

но ничего не происходит, поэтому я обнаружил эту ссылку и использовал решение, которое дается, но результат тот же.

Может ли кто-нибудь указать мне правильное направление? Я просто не знаю, что мне не хватает, я также пробовал другие ссылки, но если я помещу все сюда, это будет длинный вопрос.

Спасибо за ваше время


laravel laravel-livewire
person Japa    schedule 22.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Из того, что вы разместили здесь, проблема не совсем ясна. используя опубликованные вами фрагменты, мы не можем точно отследить, в чем проблема. Всегда лучше включать минимальный код для воспроизведения проблемы, чтобы мы могли легко найти решение для вас и других, кто может наткнуться на нее. но я все равно попробую и отвечу на твой вопрос.

загружен какой-то блейд-файл с необходимыми библиотеками 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>

Класс компонента 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 и просмотрите его в действие.

person BezhanSalleh    schedule 25.08.2020
comment
Привет, BezhanSalleh, я отказался от источника моей проблемы. Дело в том, что мой компонент livewire представляет собой модальный файл начальной загрузки, который вызывается из представления, когда вы нажимаете кнопку, появляется модальное окно (и это модальное окно является компонентом livewire). Итак, я протестировал его в этом материнском представлении, и bootratselect появился прямо сейчас, но внутри модального окна это не так. Забавно то, что весь мой файл лезвия @extends ('adminlte :: page'), поэтому мой маршрут livewire имеет - ›layout ('adminlte :: page'); ... почему он не отображается в модальном окне? С уважением - person Japa; 27.08.2020
comment
@Japa, я обновил ответ на основе вашего комментария. теперь компонент livewire находится внутри модального окна начальной загрузки, а также обновлена ​​игровая площадка, чтобы вы могли увидеть его в действии. - person BezhanSalleh; 27.08.2020