Livewire 3 Rescan Alternative
Hi, I have a rule builder component that allows the user to construct their own search query. It's similar to https://hammerstone.dev/ and was built using AlpineJS. We sync the rules to Livewire using $wire.call().
I have a few rules that are a Livewire component themselves, e.g Location and Clubs. Because of the render process, the Livewire components are rendered in the AlpineJS if-template tags and if the user chooses to filter by a club, the rendered Livewire HTML will be shown in the rule builder.
<template x-if="isMultiple(rule.field) && rule.field === 'club_picker'">
<div class="col-md-5">
<livewire:admin.ui.club-picker/>
</div>
</template>
The problem with this is that Livewire is not aware the Club filter was added to the DOM and in Livewire 2, I would call Livewire.rescan() to make the component work.
Now, in Livewire 3, there's no rescan() method. Does anyone know how I can re-initialize or reload Livewire to make it aware of these components when added to the DOM?
Hey!
If I understand this correctly, maybe for Livewire 3, instead of using rescan() like in Livewire 2, you could try using the event system? It might allow you to handle dynamic components.
What you could try is, when you dynamically add components, you can use $dispatch in your Blade templates to trigger an event that Livewire listens to.
For example, you can dispatch an add-rule event when a new rule is added, and then handle it in your Livewire component using #[On('add-rule')]. After updating your component’s state, you can dispatch another event like component-added to notify the front end.
On the JavaScript side, you can use Livewire.on('component-added', callback) to handle the event and run any additional logic if needed.
You can reference the Livewire 3 event documentation where they have examples of how to use events.
Let me know if this works!