Joost
Use x-on:click in a blade component to trigger an Action modal
Hi everyone. I'm building a fairly large application and absolutely love the component based approach of Filament. I'm using components separately, so no Panel builder.
I'm using actions heavily and recently I ran into the following scenario that I was not able to figure out.
What I want to do is:
- Have a blade component with a simple link (not a filament button)
- The link has an Alpine x-on:click (I prefer x-on: vs @click due to syntax highlighting ;-))
- This click fires an event, which gets picked up by a Livewire component, and this method then opens an Action modal
I have been successful in building this, except for that last part.
For instance, I have a blade component with
x-on:click="$dispatch('test-event')" and then in my Livewire component I have #[On('test-event')] which works fine.
However: this is a component that does not directly return an action. It sets some data in the method when triggered, and then the render() method returns a blade component, and that component has a custom <x-filament::modal ....
However if I put that #[On('test-event')] on a Livewire method (eg: exampleAction()) that returns an Action directly, nothing happens.
In the render() method of the Livewire component I return a view, and in that view I have <x-filament-actions::modals /> to ensure that the modal component is included.
The reason I want to do all this is because this specific trigger will be a nested (child) Livewire component, and I have some issues with rendering. I know there are ways around this, but the official Livewire docs (see here) actually recommend using a simple blade component if you don't need reactivity, which is the case in my scenario.5 replies