Livewire组件点击按钮弹出404弹窗问题求助

问题描述 #

我有一个展示客户信息的Livewire组件，原本运行正常。但点击带wire:click指令的按钮时，会弹出404页面弹窗。通过注释代码排查，发现是一段Reserveringen模型的数据库查询导致该问题——移除查询后按钮恢复正常，但组件功能缺失。

添加带dd()的测试按钮，点击后未返回预期结果，而是返回404，报错信息：

:8000/livewire/update:1 Failed to load resource: the server responded with a status of 404 (Not Found)

执行php artisan route:list可见livewire/update路由存在，且其他含按钮的Livewire组件均正常。

相关路由为带{email}参数的子域名路由，将提示容器移到组件外时按钮可正常工作，但希望保留在组件内。

相关代码 #

组件引用代码 #

<livewire:klant-inzien />

组件前端代码 #

<div>
   <button type="button" wire:click="test">test</button>
</div>

组件后端代码 #

<?php

namespace App\Livewire;

use App\Mail\InvitatieMail;
use Livewire\Component;
use App\Models\NieuweKlanten;
use App\Models\Reserveringen;
use App\Models\VasteKlanten;
use Illuminate\Support\Str;
use Illuminate\Mail\Mailer;

class KlantInzien extends Component
{
    public $bericht;
    public $bericht_type;

    public $email;
    public $klant = null;
    public $reserveringen;
    public $invitatie;

    protected $listeners = ['refresh' => '$refresh'];

    public function mount()
    {
      $this->email = Route::current()->parameter('email');
    }

    public function render()
    {
        // $this->klant = VasteKlanten::select('naam', 'straat', 'postcode', 'woonplaats', 'telefoonnummer', 'email')
        //     ->where('email', $this->email)
        //     ->first();

        // This code here below is causing the issue
        if (!$this->klant) {
            $this->klant = Reserveringen::select('naam', 'straat', 'postcode', 'woonplaats', 'telefoonnummer', 'email')
                ->where('email', $this->email)
                ->orderBy('id', 'desc')
                ->first();
        }

        // $this->reserveringen = Reserveringen::where(function ($query) {
        //     $klant_id = $this->klant ? $this->klant->id : null;
        //     $query->where('email', $this->email)
        //         ->orWhere('id', $klant_id);
        // })->get();

        // $this->invitatie = NieuweKlanten::where('email', $this->klant->email)->get();

        return view('livewire.beheer.klant-inzien');
    }

    public function test()
    {
        dd('test');
    }
}

相关路由代码 #

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BeheerderController;
use App\Http\Controllers\DashboardController;
use App\Http\Controllers\SessionController;
use App\Http\Controllers\VerificatieController;
use App\Http\Middleware\Guest;

Route::domain('beheer.' . env('APP_URL'))->group(function () {
    Route::middleware(['auth:web'])->group(function () {
        Route::get('/', [DashboardController::class, 'index'])->name('beheer.dashboard');

        Route::view('/klanten', 'beheer.klanten.index')->name('beheer.klanten');
        // THIS ROUTE BELOW CONTAINS MY LIVEWIRE COMPONENT 👇
        Route::view('/klanten/{email}', 'beheer.klanten.zien')->name('beheer.klanten.zien');
        Route::view('/invitaties', 'beheer.invitaties')->name('beheer.invitaties');
});

解决方案 #

1. 修正Livewire子域名资源路径 #

在config/livewire.php中配置子域名的资源地址，确保Livewire请求指向正确的子域名：

'asset_url' => env('LIVEWIRE_ASSET_URL', 'https://beheer.' . env('APP_URL')),

或在.env文件中直接添加：

LIVEWIRE_ASSET_URL=https://beheer.yourdomain.com

2. 调整模型查询逻辑，避免在render方法中赋值公共属性 #

Livewire的render方法会在每次组件更新请求时执行，直接在其中赋值公共属性可能导致数据序列化异常。将数据加载逻辑移到mount或独立方法中：

public function mount()
{
    $this->email = Route::current()->parameter('email');
    $this->loadKlantData();
}

protected function loadKlantData()
{
    $this->klant = VasteKlanten::select('naam', 'straat', 'postcode', 'woonplaats', 'telefoonnummer', 'email')
        ->where('email', $this->email)
        ->first();

    if (!$this->klant) {
        $this->klant = Reserveringen::select('naam', 'straat', 'postcode', 'woonplaats', 'telefoonnummer', 'email')
            ->where('email', $this->email)
            ->orderBy('id', 'desc')
            ->first();
    }
}

public function render()
{
    return view('livewire.beheer.klant-inzien');
}

3. 显式保留路由参数 #

在组件中添加$queryString属性，确保email参数在组件更新请求中被正确传递：

protected $queryString = ['email'];

4. 清除缓存 #

执行以下命令清除路由、视图及Livewire缓存：

php artisan route:clear
php artisan view:clear
php artisan livewire:clear

内容的提问来源于stack exchange，提问作者issatillie