phplaravellaravel-livewire

404 popup on button press in Livewire component


I have this livewire component that shows me information about a customer. It works fine. But, I have a few buttons with the action wire:click. But whenever I press those buttons, it shows a popup of my 404 page. I've tried to pinpoint the issue by commenting code, and I've found that a database query causes the issue. When I remove it, the buttons work, but the functionality gone. In short: I need the database query in order for this component to serve its purpose.

My view contains this component:

<livewire:klant-inzien />

And this is the frontend of my component (I removed like all the code and only kept what is needed):

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

And this is my backend:

<?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');
    }
}

I am not able to find a solution to this problem and why it's caused. Does anyone know a solution?

I tried to add a test button with a dd() function to see if the code works but it returns a 404. Normally, it should just show the dd() result, but instead it returns a 404.

The 404 returns with a

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

While using php artisan route:list, the update route does exist. All my other components work, even those containing buttons.

EDIT: These are my routes (not all of them)

<?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');
});

EDIT: When I place the alert container outside the component it does work. But i'd like to keep it within the component.


Solution

  • I simplified all queries and went from fetching a few fields to all. Now it seems to work. Really weird.

     public function render()
        {
            if (!$this->email) {
                abort(404);
            }
    
            $this->klant = VasteKlanten::where('email', $this->email)->first();
    
            if (!$this->klant) {
                $this->klant = Reserveringen::where('email', $this->email)
                    ->orderBy('id', 'desc')
                    ->first();
    
                $this->vaste_klant = false;
            }
    
            if ($this->klant) {
                $this->reserveringen = Reserveringen::where('email', $this->email)->get();
                $this->invitatie = NieuweKlanten::where('email', $this->klant->email)->get();
            }
    
            return view('livewire.beheer.klant-details');
        }