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.4 Replies
I think you could provide a minimal repo on Github to reproduce what you are trying to do
A much shorter an simpler version of the question is:
Can you trigger a Filament Action that is defined in a Livewire component through an
x-on:click in a blade component, instead of the buttion() defined on the Livewire component.x-on:click="$wire.mountAction('yourActionName')"Thanks! I found that in the docs but got an error, just found that that was because the x-on:click obviously needs to be in the blade view that belongs to the Livewire component. This is quite a powerful pattern I think, because I need to pass a parameter and then do a query. If I do
{{ $this->myAction }} it will directly run the action and perform the query for every component loaded.
Thanks again! 👍