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

Question

我有一个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

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

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

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

我不知道我说的是否有道理。请检查是否在刷新之前重新初始化它。让我知道