每次迭代显示文本 laravel Livewire

Question

我需要你的帮助。假设我有一个包含 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 在所有迭代后填充了信息，然后刷新了组件。我尝试在每次迭代中发送将调用刷新方法的自定义事件，但没有成功。我会感谢任何建议，如果您需要更多信息，我会提供。

Answer 1

假设您也在使用 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 块中访问的特殊对象。

每次迭代显示文本 laravel Livewire

Display text on each iteration laravel Livewire

php

laravel

laravel-livewire