Question

Laravel livewire 渲染后 Bootstrap 选择不起作用

2020-03-13

8401

javascript laravel 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> 元素，因此这些函数似乎确实不起作用。

Answer 1

如果其他人遇到此问题，请按照以下方法操作。

<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 的创建者：Caleb！

Answer 2

只需在 html input/select 标签上添加 wire:ignore 即可

Josama Jeff Vladimir

2020-09-28

Answer 3

如果有人仍在寻求答案。添加 wire:ignore 不是一个好主意，因为这样你就无法动态更改选项，例如选择国家/地区，然后根据国家/地区动态更改选择城市。要摆脱 wir:ignore，你可以在组件外使用它。

<script>
document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('message.received', (message, component) => {
        $('select').selectpicker('destroy');
    })
});

window.addEventListener('contentChanged', event => {
    $('select').selectpicker();
});</script>

和

$this->dispatchBrowserEvent('contentChanged');

在你的组件上。

selectpicker 无法在同一个选择上呈现，这就是为什么“刷新”或“渲染”即使在控制台中也不起作用的原因。你需要先销毁它。