Dynamic modals (data-binding params)

[DoneItInnovations]

It would be great if we could pass params (like id, or any other variable) with the modal's trigger button.
It would pass the param into the dispatch event's params part.

I mean it something like this:

<flux:modal.trigger name="edit-profile" :param="$row->id">
    <flux:button>Edit profile</flux:button>
</flux:modal.trigger>

[joesmalec]

I 100% need this

[ju5t]

What's the use case?

[ju5t]

Yea but what are you trying to do? Do you want to reuse a modal?

[SeraphixMD]

That'd be a good example, yes. Reusing modals is already possible. However, as far as I was able to figure it out, I still need to make a round trip to the server with the ID of the entry, in between the user pressing the delete button, and pressing confirm in the modal that pops up, to make sure the server knows which entry to remove. Maybe I could use Alpine to store this ID temporarily on the client, haven't tried that yet, but it would make more sense to me, logically, if I could just pass that ID as an attribute to the modal and be done with it.

[richardvil]

@ju5t reuse is an option but the best example for this feature is with confirmation modal where wire:confirmation isn't enough. In those scenarios it's very common pass an id or some other parameters. So after the user confirm the action you can call a method from your component with wire:click for example.

[igmltd]

I just assign the id to a global alpine variable when the user clicks the button, then call the action with alpine e.g x-on:click=$wire.delete(AlpineVariableWithUserId)

<div x-data="{ userid : '' }">

// inside the loop

 <flux:modal.trigger name="delete-profile">
<flux:button x-on:click="userid = {{ $user->id }}" icon="trash"></flux:button>
</flux:modal.trigger>


// outside the loop

  <flux:modal name="delete-profile" class="min-w-[22rem] space-y-6">
        <div>
            <flux:heading size="lg">Delete project?</flux:heading>

            <flux:subheading>
                <p>You're about to delete this project.</p>
                <p>This action cannot be reversed.</p>
            </flux:subheading>
        </div>

        <div class="flex gap-2">
            <flux:spacer />

            <flux:modal.close>
                <flux:button variant="ghost">Cancel</flux:button>
            </flux:modal.close>

            <flux:button type="button" x-on:click=$wire.delete(userid)  variant="danger">Delete project</flux:button>
        </div>
    </flux:modal>
    
     </div>

[cord]

rich quickview on larger tables