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