Opening modal from blade component

[thetwopct]

Hey, thanks for making such a great package. Super simple to use.

I have setup a button to trigger a modal, passing a value from the page I am on:

<button 
class="bg-blue-500 text-white p-4"
onclick='Livewire.emit("openModal", "create-document", {{ json_encode(["setComponent" => $component->id]) }})'>
Upload Document
</button>

This works perfectly, passes the data I want. Great!

We are using blade components on the site to keep the styling of every button the same. So I use:

<x-button
type="button"
name="Add New Document"
color="primary"
onclick="Livewire.emit('openModal', 'create-document')">
Add a new document</x-button>

This also works! But, when I try to pass a value, it breaks. I've tried (what I feel like) all sorts of different quote combinations as i saw your (notice the single quotes) comment in docs.

<x-button
type="button"
name="Add New Document"
color="primary"
onclick='Livewire.emit("openModal", "create-document", {{ json_encode(["setComponent" => $component->id ]) }})'>
Add a new document</x-button>

<x-button
type="button"
name="Add New Document"
color="primary"
onclick="Livewire.emit('openModal', 'create-document', {{ json_encode(['setComponent' => $component->id ]) }}
)">
Add a new document</x-button>

Am I missing something really obvious?

Using version 1.0.0

Thank you!

[ju5t]

I might not be the best person to help you get this sorted out, but I'm not seeing either an error message or an explanation what's going wrong, so right now, it's pretty difficult to help :)

[designvoid]

Hi there - I have run into the same issue - following the exact example in the readme trying to pass a model ID to the modal and it throws the following error:

Cannot assign int to property App\Http\Livewire\EditUser::$user of type App\Models\User (View: /Users/***/Server/Code/***/vendor/livewire-ui/modal/resources/views/modal.blade.php)

(*** just hiding personal details)

[PhiloNL]

@designvoid change your property from:
public User $user; to public int|User $user;

[nocodelab]

Ran into the same issue. The docs should be updated accordingly @PhiloNL :) .

[ju5t]

I thought Livewire itself didn't have this issue? Correct me if I'm wrong though!

[mokhosh]

@PhiloNL thanks for the great component. This one issue is weird tho.

[mokhosh]

😕

[PhiloNL]

Sorry, thought the issue was fixed 😅

[PhiloNL]

Have you tried using the @json directive?

[mokhosh]

Yup both json and the new js directive. Same story.

[PhiloNL]

How about moving the encoding inside the button component? Not sure if this makes a difference but worth a try.

<x-button
type="button"
name="Add New Document"
color="primary"
modal="create-document"
:modal-data=”["setComponent" => $component->id ])”>
Add a new document</x-button>

[mokhosh]

Tried it. Didn't help.

I don't think the problem is in how we send the data, that part is fine. The problem is in where and how we resolve the model. We need to resolve the model sooner so the "int" turns into a "Model" before we try to assign the data to the property.

[mpskovvang]

I have the same experience using Livewire 2.7.2 and Alpine.js 3.6.1.

My workaround:

class EditUserModal extends ModalComponent
{
    public User|int $user;

    public function mount(User|int $user)
    {
        $this->user = $user instanceof User ? $user : User::find($user);
    }
}

<button wire:click.prevent='$emit("openModal", "edit-user-modal", @json(['user' => $user->id]))'>Edit</button>

[dambridge]

Same issue here, but the fix @mpskovvang proposed still doesn't work for me.