Hi,

I'm displaying a list of platforms in a table, with each row containing a delete button to allow users to delete the corresponding platform if needed.

I've installed Laravel Breeze, which includes a modal dialog that I'm trying to reuse for this purpose.

My challenge is dynamically passing the platform ID to the form's action attribute within the modal dialog.

Any tips or suggestions would be greatly appreciated!

Kind regards, Kalle

Here is my code for the button The platform ID sits in in $platform->id and when the button is clicked the message is dispatched and the dialog is shown (but I don't manage to pass the platform ID to the dialog)

<svg class="inline-block h-5 w-5 fill-gray-400 hover:fill-blue-600 cursor-pointer" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 576 512"
  x-data=""                                   
  x-on:click.prevent="() => { 
   <!-- alert('{{ $platform->id }}'); -->
   $dispatch('open-modal', 'confirm-platform-deletion');                                   
   }"                                  
   >
 <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->                                  
  <path d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320zm96 64c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16z"/>
 </svg>

https://paste.laravel.io/a9c20718-3e2f-47e1-82e2-7883790da574

Here is the code that shows the dialog box (The x-modal is a component that was installed together with breeze and can be viewn here:
https://paste.laravel.io/fec03e81-7b22-4f93-abb5-a362757c346f

And finally, here is the code that I try to pass Platform ID to: And the reason I can't use platfrom-ID herer, is beacuase I'm looping throug all platforms when I create the tabel, and this dialog sits outside the tabel.

<x-modal name="confirm-platform-deletion"  
   focusable
   x-data="{ platformId: '-1' }"
   {{--x-data="{ platformId: null }" 
   x-on:open-modal.window="platformId = $event.detail.id"    --}}
>
                          

   <form method="post" action="{{ route('platforms.destroy', '99' ) }}" class="p-6">
   @csrf
    @method('delete')

   <div x-ref="div" x-model="platformId"></div>

   <h2 class="text-lg font-medium text-gray-900">
   {{ __('Are you sure you want to delete the platform?') }}   ID: <span x-text="$refs.div._x_model.get()"></span>
   </h2>

   <p class="mt-1 text-sm text-gray-600">   
  {{ __('This action can\'t be undone') }}
   </p>            
      
   <div class="mt-6 flex justify-left">
   {{--<x-secondary-button x-on:click="showModal = false">--}}
   <x-secondary-button x-on:click="$dispatch('close')">                                  
      {{ __('Cancel') }}   
   </x-secondary-button>
      <x-danger-button class="ms-3">
         {{ __('Delete') }}
       </x-danger-button>
    </div>
    </form>
</x-modal>

And here is the link to the code!: https://paste.laravel.io/2c9ff5ba-7d2b-4cec-b5b9-db1d25d5add8