Unique Key for Repeatable Livewire Component

[adrianlzx1996]

I have a use case where i need to repeat / re-use the same Livewire Component in a single page.

I have noticed in the return of the livewire embed call it is targeting only the data-component.

I proposed to have a data-key to come along with the current data-component and data-params in order to replace the correct component in the HTML.

[dircm]

@adrianlzx1996 you might be able to create your "parent" embeddable component view with the correct number of nested components (in a loop for example) to achieve the desired effect ?

[adrianlzx1996]

@adrianlzx1996 you might be able to create your "parent" embeddable component view with the correct number of nested components (in a loop for example) to achieve the desired effect ?

Correct me if i'm wrong, you're suggesting to put the repeatable component inside of a "parent" embeddable component, so that i do not have to repeat the child component in my web page?

This is entirely possible, however, it will create more hassle on my end to create the "parent" component, where the parent component have a complicated logic written and proven working, i do not wish to re-write the parent component...

[dircm]

@adrianlzx1996 you might be able to create your "parent" embeddable component view with the correct number of nested components (in a loop for example) to achieve the desired effect ?

Correct me if i'm wrong, you're suggesting to put the repeatable component inside of a "parent" embeddable component, so that i do not have to repeat the child component in my web page?

This is entirely possible, however, it will create more hassle on my end to create the "parent" component, where the parent component have a complicated logic written and proven working, i do not wish to re-write the parent component...

Yes, the parent component becomes a container for your multiple (nested) components. Livewire makes this very easy: https://livewire.laravel.com/docs/nesting#rendering-children-in-a-loop and also includes details on how to ensure your nested components can be reactive to any changes in the parent properties.

[dircm]

And dont forget this from the wire-extender documentation : If you are using nested components, please make sure all components have the #[Embeddable] trait.

[rossminney]

I also have a use case for wanting to embed multiple components on a page, however it's not necessarily practical to have them 'nested'. Eg. Having multiple contact forms, at different points throughout a sales landing page. 95% of the content is on the Wordpress end, with the laravel application capturing the leads. 🤓