3

我有一个Bootstrap selectpicker元素，它在第一次渲染时工作正常。它初始化为：

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

但是在调用 livewire 的 render 函数后，<select>元素不再呈现为 Bootstrap selectpicker。

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

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

但这不起作用。我也试过：

$('select').selectpicker();

和

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

两者都在 内afterDomUpdate，这也不起作用。如果我从控制台调用所有这些函数，则 DOM 不会更新<select>元素，所以这些函数确实似乎不起作用。

4

5 回答 5

7

万一其他人遇到这个问题，这就是你的做法。

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

于 2020-07-16T17:50:37.577 回答
1

如果有人仍在寻求表格答案。添加 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 不能在同一个选择上呈现，这就是为什么“刷新”或“渲染”即使在控制台中也不起作用。你需要火力摧毁它。

于 2021-10-26T14:33:42.600 回答
1

只需添加wire:ignore您的 htmlinput/select标签

于 2020-09-28T02:40:08.660 回答
0

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

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

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

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

于 2020-03-15T17:39:28.327 回答
0

尝试

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

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

于 2020-06-05T14:14:25.393 回答