Выбор начальной загрузки не работает после рендеринга Laravel livewire

У меня есть элемент Bootstrap selectpicker, который отлично работает при первом рендеринге. Он инициализируется:

$(document).ready(function () {
    $('select').selectpicker();
});

Но после вызова функции рендеринга livewire элемент <select> больше не отображается как средство выбора Bootstrap.

Просматривая оба документа (соответствующие разделы здесь и здесь), я решил, что приведенный ниже код должен исправить это:

<script>
    document.addEventListener("livewire:load", function(event) {
        window.livewire.hook('afterDomUpdate', () => {
            $('select').selectpicker('refresh');
        });
    });
</script>

Но это не работает. Я также пробовал:

$('select').selectpicker();

а также

$('select').selectpicker('render');

оба в afterDomUpdate, это тоже не работает. Если я вызываю все эти функции из консоли, DOM не обновляет элемент <select>, поэтому действительно, похоже, что эти функции не работают.


javascript laravel laravel-livewire
person eskimo    schedule 13.03.2020    source источник
comment
У меня такая же проблема, но я использую плагин select2   -  person rslhdyt    schedule 03.06.2020
comment
То же самое здесь, теряю часы с этим   -  person Japa    schedule 23.08.2020

Ответы (4)


arrow_upward
3
arrow_downward

на случай, если кто-то еще застрянет с этим, вот как вы это сделаете.

<div wire:ignore id="for-bootstrap-select">
     <select class="form-control" data-container="#for-bootstrap-select">
         @foreach($data as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
         @endforeach
     </select>
</div>

Причина от самого создателя livewire: Калеб! < / а>

person BezhanSalleh    schedule 16.07.2020
comment
Вы помещаете это в файл лезвия livewire ... но требуется ли вам также jquery в app.js и импортировать css в app.scss? я использую смесь? - person Japa; 23.08.2020
comment
да. Поскольку мой компонент livewire расширяет основной макет, и все ресурсы (js / css) инициализируются в мастере. Я использую компакт-диски, а не локальные библиотеки, но даже если вы используете микс, я уверен, что это ни на что не повлияет. - person BezhanSalleh; 24.08.2020
comment
Привет, BezhanSalleh, он просто не отображает, если только с классом form-control, но если я попытаюсь использовать select multiple с несколькими data-actions-box = true, что я хочу, он просто покажет открытый выбор со всеми параметры. Не могли бы вы взглянуть на мой вопрос? stackoverflow.com/questions/63542114/. С Уважением. - person Japa; 25.08.2020
comment
@Japa проверьте это ... я надеюсь, что это поможет ... если это не так, вам нужно опубликовать фактические фрагменты кода, чтобы я мог его взглянуть ... потому что в моем тесте он работает отлично ... также опубликовал ссылка на детскую площадку, где вы можете это проверить. - person BezhanSalleh; 25.08.2020
comment
Привет, BenzhanSalleh, прежде всего большое спасибо за то, что потратили время, помогая мне, я собираюсь проверить это и протестировать, и я дам свой отзыв, С уважением. - person Japa; 26.08.2020

arrow_upward
1
arrow_downward

Просто добавьте wire:ignore в свой HTML-тег input/select

person Josama Jeff Vladimir    schedule 28.09.2020

arrow_upward
0
arrow_downward

Я думаю, вы повторно инициализируете свой selectpicker каждый раз, когда обновляете dom. вот почему всякий раз, когда вы используете

 $('select').selectpicker('refresh');

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

Не знаю, имею ли я смысл. перед обновлением убедитесь, что вы повторно инициализируете его. дайте мне знать

person fahim152    schedule 15.03.2020

arrow_upward
0
arrow_downward

Пытаться

$('.selectpicker').selectpicker('refresh');

Я знаю, что это практически то же самое, что и ваш, но в моем случае не все select были bootstrap-selects, поэтому нацеливание только на класс .selectpicker, похоже, дало желаемый эффект. Может быть отвлекающим маневром, но у меня сработало.

person Marc Hampson    schedule 05.06.2020
comment
Чем это отличается от использования 'select'? Насколько я понимаю, теперь вы используете класс вместо типа элемента, но функция с именем refresh осталась прежней? - person eskimo; 05.06.2020
comment
Хотя этот код может решить проблему OP, лучше всего включить объяснение того, как ваш код решает проблему OP. Таким образом, будущие посетители могут извлечь уроки из вашего сообщения и применить его к своему собственному коду. SO - это не сервис кодирования, а ресурс знаний. Кроме того, больше шансов получить за качественные и полные ответы. Эти функции, наряду с требованием, чтобы все сообщения были автономными, являются одними из сильных сторон SO как платформы, которые отличает ее от форумов. Вы можете редактировать, чтобы добавить дополнительную информацию и / или дополнить свои пояснения исходной документацией. - person ysf; 05.06.2020