Modal opening and closing in blade

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"

Undefined constant "open"

here on

:open='open'

: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

: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>

<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

Pastebin

@props([ 'title' => '', 'closable' => true, 'closeTrigger'...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Modal opening and closing in blade

Undefined constant "open"

Undefined constant "open"

here on

:open='open'

: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

: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>

<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

Pastebin

@props([ 'title' => '', 'closable' => true, 'closeTrigger'...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Modal opening and closing in blade

Similar Threads

Modal opening and closing in blade

Similar Threads

Similar Threads

Similar Threads