Modal opening and closing in blade

[latent fable]

Hi there, I highly doubt if I am in the right place to ask for this here, but I am unsure where I should ask otherwise, so please let me know if I am.

I am quite new to filament / livewire and am used to React, so this has been quite a pain, but I am wondering how I can open a modal within a blade:

This is my component which is trying to use my modal component, however I stay getting Undefined constant "open" here on :open='open', as far as I knew you could just use x data variables as element parameters right? I've done the same for many button :disabled props for a loading state.

<div x-data="{ open: false }" class="relative">
    {{-- CLICKABLE CARD --}}
    <div @click="open = true"
        class='rounded-lg transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg border border-gray-600 bg-card text-card-foreground relative shadow-sm cursor-pointer group'>
        .....
    </div>

    <x-modal :title="Purchase" :open='open'>
       .....
    </x-modal>
</div>

This is the modal component, but I doubt it matters much as the error happens before it even gets loaded / shown: https://pastebin.com/KGFy4JQZ

[gaunt zephyr]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[twilit salmon]

So I am guessing you want to open a livewire modal opposed to a filament related comment. The easiest way is to see:

https://livewire.laravel.com/docs/3.x/wire-show#basic-usage

[twilit salmon]

Note though, you could also just add in a filamentphp action(this is essentially a modal too) and render what you want in there.

[latent fable]

well I'd love too but you can't add those in a blade can you? and not as an onclick function of a specific div

[twilit salmon]

Yes… just create a livewire component which is a class and a blade

[languid sinew]

In blade the :attribute has special meaning which is to pass in dynamic values without having to use the {{ }} syntax. While it is also a short hand for x-bind in alpine it’s not going to work with blade as a short hand since blade gets parsed first. It you need it tied to alpine do x-bind:open=“open”

I’m thinking that might not totally work for you though as it looks like the value of open is a prop for x-modal. Typically something like open would be bound to x-show=“open” that way the element is hidden until the alpine state becomes true.

[latent fable]

aaa all right, that makes sense yea, thanks mate that really helped

[latent fable]

that was indeed the case, currently made it work with $dispatch('modal-open') and @modal-open.window="open = true" in the modal component