Laravel livewire 渲染后引导选择不起作用

Question

我有一个Bootstrap selectpicker 元素，在第一次渲染时效果很好。它初始化为：

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

但是在调用 livewire 的渲染函数后，<select> 元素不再渲染为 Bootstrap 选择器。

浏览了这两个文档（相关部分 here 和 here），我认为下面的代码应该可以修复它：

<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>

原因 from the creator of livewire himself: Caleb!

Answer 2

只需在您的 html input/select 标签上添加wire:ignore

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 不能在同一个选择上呈现，这就是为什么“刷新”或“呈现”即使在控制台中也不起作用。你需要用火摧毁它。

Answer 4

我认为，您每次更新 dom 时都会重新初始化您的 selectpicker。这就是为什么无论何时使用

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

在你的 livewire 钩子中，它基本上刷新了你的 dom 中新初始化的 selectpicker。我猜是这样，因为根据您上面的代码和声明，它应该可以工作，除非像我提到的那样在幕后发生错误。

我不知道我是否有意义。请在刷新之前检查您是否正在重新初始化它。告诉我

Answer 5

试试

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

我知道这实际上与您的相同，但就我而言，并非所有选择都是引导选择，因此仅针对 .selectpicker 类似乎具有预期的效果。可能是红鲱鱼，但对我有用。