FilamentF
Filament•2w ago
RX

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" 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
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.
Was this page helpful?