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

Posted 2023-02-22

【中文标题】Laravel livewire 渲染后引导选择不起作用

【英文标题】：Bootstrap select not working after Laravel livewire render

【发布时间】：2020-06-25 21:08:36

【问题描述】：

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

【问题讨论】：

我有同样的问题，但我的情况是使用 select2 插件时

这里也一样，一直在浪费时间

【参考方案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!

【讨论】：

你把它放在livewire刀片文件中......但是你是否还需要app.js中的jquery并在app.scss中导入css？我正在使用混合？

是的。由于我的 livewire 组件扩展了主布局，并且所有资产（js/css）都在 master.xml 中初始化。我使用的是 cdns 而不是本地托管库，但即使您使用的是 mix 我也肯定它不会影响任何东西。

嗨 BezhanSalleh，除非使用类表单控件，否则它根本不会呈现，但如果我尝试将 select multiple 与多个 data-actions-box="true" 一起使用，这就是我想要的，它只显示一个包含所有选项的打开选择。你能看看我的问题吗？ ***.com/questions/63542114/… 。问候。

@Japa 检查一下...我希望它有帮助...如果不需要，您需要发布实际代码 sn-ps 以便我可以看看...因为在我的测试效果很好......还发布了游乐场的链接，您可以在其中查看。

您好 BenzhanSalleh，首先非常感谢您花时间帮助我，我将检查并测试并提供反馈，问候。

【参考方案2】：

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

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

【参考方案4】：

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

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

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

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

【参考方案5】：

试试

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

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

【讨论】：

这与使用'select' 有何不同？我了解到您现在使用类而不是元素类型，但名为refresh 的函数仍然相同？

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。