Laravel 10+Livewire 3懒加载生效但数据库数据无法显示求助

问题描述 #

我正在使用Laravel 10和Livewire 3实现懒加载功能，懒加载已正常触发（能看到Loading提示），但加载完成后数据库表中的服务数据无法显示，求解决办法。

组件代码（ServiceSlider.php） #

<?php

namespace App\Livewire\Service;

use Livewire\Component;
use App\Models\Service;
use Illuminate\Support\Facades\DB; // 未使用，可移除

class ServiceSlider extends Component
{
    public $services; // 声明服务数据属性

    public function mount()
    {
        $this->services = Service::all();
    }

    public function placeholder()
    {
        return <<<'HTML'
        <div>
            <p style="color:black">Loading...</p>
        </div>
        HTML;
    }

    public function render()
    {
        sleep(3); // 模拟加载延迟
        return view('livewire.service.service-slider');
    }
}

视图代码（service-slider.blade.php） #

<div class="service-slider owl-one owl-carousel owl-theme">
    @foreach($services as $service)
        <div class="item">
            <div class="service_icon">
                <img src="{{ asset('assets/uploads/' . $service->icon) }}" />
            </div>
            <div class="connector">
                <span></span>
            </div>
            <div class="service-card">
                <div class="service_detail">
                    <h5>
                        <a href="{{ url($service->slug) }}" title="" wire:navigate>{{ $service->name }}</a>
                    </h5>
                    <p>
                        <?php
                        $description = $service->short_description;
                        $words = str_word_count($description, 1);
                        $first_20_words = implode(' ', array_slice($words, 0, 20));
                        echo $first_20_words . '...';
                        ?>
                    </p>
                </div>
            </div>
        </div>
    @endforeach
</div>

组件调用代码 #

@livewire('service.service-slider' , ['lazy' => true] )

解决方案 #

1. 调整数据查询时机 #

Livewire 3懒加载组件中，mount方法的执行逻辑可能导致数据无法正确传递到视图。将数据查询移至render方法，确保组件加载时能获取并渲染数据：

<?php

namespace App\Livewire\Service;

use Livewire\Component;
use App\Models\Service;

class ServiceSlider extends Component
{
    public $services;

    public function placeholder()
    {
        return <<<'HTML'
        <div>
            <p style="color:black">Loading...</p>
        </div>
        HTML;
    }

    public function render()
    {
        sleep(3);
        // 移至render中查询数据
        $this->services = Service::all();
        return view('livewire.service.service-slider');
    }
}

2. 优化视图代码（可选） #

用Laravel内置的Str::words辅助函数替换原生PHP代码，让视图更简洁易维护：

<div class="service-slider owl-one owl-carousel owl-theme">
    @foreach($services as $service)
        <div class="item">
            <div class="service_icon">
                <img src="{{ asset('assets/uploads/' . $service->icon) }}" />
            </div>
            <div class="connector">
                <span></span>
            </div>
            <div class="service-card">
                <div class="service_detail">
                    <h5>
                        <a href="{{ url($service->slug) }}" title="" wire:navigate>{{ $service->name }}</a>
                    </h5>
                    <p>
                        {{ Str::words($service->short_description, 20) }}...
                    </p>
                </div>
            </div>
        </div>
    @endforeach
</div>

3. 排查数据有效性 #

临时添加日志确认数据库中是否存在数据：

// 在render方法中添加
\Log::info('服务数据数量：' . Service::count());

查看storage/logs/laravel.log，如果数量为0，需检查模型配置（如表名、数据库连接）或数据库数据是否存在。

内容的提问来源于stack exchange，提问作者Tosh Kumar Patel