Add alpine data to filament modal

Is there a way of accessing the x-data from inside the header slot?

<button
    type="button"
    x-on:click="$dispatch('open-modal', {id: 'custom-modal'})"
>
    Open
</button>

<x-filament::modal id="custom-modal">
    <div x-data="{ name: 'Filament' }">
        <x-slot name="header">
            Name: <span x-text="name"></span>
        </x-slot>

        <div>
          <input x-model="name" />
        </div>
    </div>
</x-filament::modal>

<button
    type="button"
    x-on:click="$dispatch('open-modal', {id: 'custom-modal'})"
>
    Open
</button>

<x-filament::modal id="custom-modal">
    <div x-data="{ name: 'Filament' }">
        <x-slot name="header">
            Name: <span x-text="name"></span>
        </x-slot>

        <div>
          <input x-model="name" />
        </div>
    </div>
</x-filament::modal>

If I add x-data to x-filament::modal I get error with

can't access property "dispatchEvent", this.$refs.modalContainer is undefined

2 Replies

Dan Harrin•2y ago

since the actual modal is also a LW component, it probably conflicts with that

LeandroFerreira•2y ago

<div>
    <button type="button" x-on:click="$dispatch('open-modal', {id: 'custom-modal'})">
        Open
    </button>

    <div x-data="{ name: 'Filament' }">
        <x-filament::modal id="custom-modal">
            <div>
                <x-slot name="header">
                    Name: <span x-text="name"></span>
                </x-slot>

                <div>
                    <input x-model="name" />
                </div>
            </div>
        </x-filament::modal>
    </div>
</div>

<div>
    <button type="button" x-on:click="$dispatch('open-modal', {id: 'custom-modal'})">
        Open
    </button>

    <div x-data="{ name: 'Filament' }">
        <x-filament::modal id="custom-modal">
            <div>
                <x-slot name="header">
                    Name: <span x-text="name"></span>
                </x-slot>

                <div>
                    <input x-model="name" />
                </div>
            </div>
        </x-filament::modal>
    </div>
</div>

You can also use <x-filament::button> and <x-filament::input />

Gaming

Programming

Add alpine data to filament modal