laravel Flowbite & LiveWire -强制重新渲染

rbl8hiat 于 11个月前发布在其他

关注(0)|答案(1)|浏览(116)

我正在使用以下堆栈：

Laravel 10.29.0
*Livewire 2.12
TailwindCSS 3.3.5**
AlpineJS 3.13.1**
*Flowbite 2.0.0
*PHP 8.2

我的问题是当使用Flowbite重新渲染内容时，Livewire更新整个DOM。具体来说，我正在处理 * 工具提示 * 和 * 分页 *，但我想这个问题会影响所有Livewire相关组件。当页面最初加载时，工具提示按预期工作。然而，当我导航到第2页时，工具提示停止渲染。
我相信这是Livewire和其他JS库不能很好地配合的一个相当常见的问题，因为整个DOM都被重新渲染了。到目前为止，我已经尝试过在检测到Livewire更新时强制工具提示重新渲染，但这并没有给我带来给予期望的结果，而且当Livewire更改页面时工具提示也不会被渲染。
有没有人有办法解决这个问题？我考虑过升级到Livewire版本3，但是看起来他们没有对DOM的操作方式做任何改变。
谢谢
下面是我使用的一个代码示例：

<div
    id="tooltip-foo{{ $bar->id }}"
    role="tooltip"
    class="
        absolute
        ...
        shadow-sm
        opacity-0
        tooltip
        dark:bg-gray-700">
    {{
        \Carbon\Carbon::parse($bar->birthdate)
            ->format('j F Y, g:i A')
    }}
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

字符串

laravel

来源：https://stackoverflow.com/questions/77379686/flowbite-livewire-force-re-render

1条答案

按热度按时间

pftdvrlh1#

在app.js中添加：

Livewire v2：

import { initFlowbite } from 'flowbite';
    
    Livewire.hook('message.processed', (message, component) => {
        initFlowbite();
    })

字符串

Livewire v3：

import { initFlowbite } from 'flowbite';

Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
    succeed(({ snapshot, effect }) => {
        queueMicrotask(() => {
            initFlowbite();
        })
    })
})

document.addEventListener('livewire:navigated', () => {
    initFlowbite();
})

型

赞(0）回复(0）举报 11个月前

我来回答

laravel Flowbite & LiveWire -强制重新渲染

1条答案

相关问题

热门标签

最新问答