在每次迭代 laravel Livewire 上显示文本

如何解决在每次迭代 laravel Livewire 上显示文本

我需要你的帮助。假设我有一个包含 10 个元素的数组，每条记录都要在每次迭代中显示，我想用 Livewire 来完成，让我与您分享一些代码，并告诉您我到目前为止所做的尝试.

public $content;

public $array = ['first','second','third','fourth'];

foreach ($array as $item) {
    sleep(1);
    $this->content[] = "Element ${item}";
}

<div class="modal-body">
    @if ($content)
        <ul class="listree">
            @foreach ($content as $element)
                <li>
                    <div class="listree-submenu-heading">
                        {!! $element['title'] !!}
                    </div>
                    <ul class="listree-submenu-items">
                        @foreach ($element['elements'] as $sub)
                            <li>
                                <div class="listree-submenu-heading">
                                    {!! $sub['title'] !!}
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </li>
            @endforeach
        </ul>
    @endif
</div>

我的想法是显示第一条记录，等待 1 秒，显示第一条和第二条记录，等待 1 秒，显示第一条、第二条和第三条记录等等......我如何用 livewire 做到这一点。问题是$content在所有迭代后填充信息，然后刷新组件。 我尝试在每次迭代中发送将调用刷新方法的自定义事件，但没有成功。我会感谢任何建议，如果您需要更多信息，我会提供。

解决方法

假设您也在使用 alpinejs，这可以很容易地完成。

<x-app-layout>
    <div class="text-gray-800 ml-10">
        <ul class="bg-green-200">
            <!-- The main foreach loop. -->
            @foreach (range('a','z') as $element)
                <!-- render al <li> tags with display:none. -->
                <!-- Show the 1st after 0s,the 2nd after 1s,the 3rd after 2s,... -->
                <li class="bg-blue-200 m-5" 
                    x-data="{show: false,index: {{ $loop->index }} }" 
                    x-init="setTimeout(() => show = true,index * 1000)">

                    <div x-show="show">
                        {{ $element }}
                        ...
                    </div>

                </li>
            @endforeach
        </ul>
    </div>
</x-app-layout>

$loop 是一个可以在 @foreach 块内访问的特殊对象。