How to show a detail page of a product with Laravel and Livewire

Question

I created a Laravel Jetstream lifewire page from a tutorial. I show a list of records, and added a details button.

<button wire:click="showdetails({{ $vehicle->id }})"class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-500 hover:bg-blue-700">
   Details
</button>

When I click onto this button, I want to see the detail page of the record (new view, not the view of the list).

Info vehicle.php I added this function

public function showdetails($id)
{
    $this->vehicle = Vehicle::find($id);
    return view('livewire.vehicle.details');
}

I made something wrong, because this view will not be shown. How can I solve this problem?

Thanks for help!

Answer 1

1. Create a route to your Livewire ShowVehicle component:

Route::get('/vehicle/{id}', ShowVehicle::class);

2. Redirect to that route:

   public function showdetails($id)
   {
       return redirect()->to("/vehicle/$id");
   }
   

3. Display item details with ShowVehicle component:

   class ShowVehicle extends Component
   {
      public $vehicle;
   
      public function mount($id)
      {
         $this->vehicle = Vehicle::find($id);
      }
   
      public function render()
      {
         return view('livewire.vehicle.details', [
            'vehicle' => $this->vehicle,
         ]);
      }
   }