© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
2 replies
exactwebitesolutions

Add alpine data to filament modal

Is there a way of accessing the
x-data
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
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Add Alpine Plugin
FilamentFFilament / ❓┊help
3y ago
How can I add alpine plugin to my filament plugin?
FilamentFFilament / ❓┊help
2y ago
How to add margin bottom in filament modal?
FilamentFFilament / ❓┊help
3y ago
How to use Alpine in Filament?
FilamentFFilament / ❓┊help
13mo ago