wire-extender icon indicating copy to clipboard operation
wire-extender copied to clipboard

Unique Key for Repeatable Livewire Component

Open adrianlzx1996 opened this issue 1 year ago • 5 comments

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.

adrianlzx1996 avatar Mar 24 '24 01:03 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 ?

dircm avatar Mar 24 '24 02:03 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...

adrianlzx1996 avatar Mar 24 '24 02:03 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...

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 avatar Mar 24 '24 04:03 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.

dircm avatar Mar 24 '24 04:03 dircm

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. 🤓

rossminney avatar Apr 03 '24 19:04 rossminney