search

wire-elements / wire-extender

Wire Extender allows you to embed any Livewire component on any website or even within a static HTML file.
https://wire-elements.dev/blog/embed-livewire-components-using-wire-extender
MIT License
208 stars 6 forks source link

Unique Key for Repeatable Livewire Component #3

Open adrianlzx1996 opened 3 months ago

adrianlzx1996 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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