Calling dynamic content with blade (Livewire)

Question

I am using laravel-modules in a project. I also added laravel-modules-livewire to the project, and I am using it to call dynamic content in my dashboard to allow configuration of each module. The way I designed it, each module will have a configuration livewire component that should be called in the account settings section, to allow each client to configure the way the module behaves for him.

In my Account/Modules livewire I have this in the mount method:

    public $client;
    public $modules;

    public function mount( Client $client )
    {
        $this->client  = $client;
        $this->modules = $client->getModules();
    }

The $client->getModules retrieves a collection of modules that the client has active. According to nWidart/Laravel-Modules, you can get the name of the module with $module->getName(), you can also get the lower case name with $module->getLowerName(). And according to mhmiton/laravel-modules-livewire, you should use <livewire:{module-lower-name}::component-class-kebab-case /> to render your livewire components inside a module. So I wrote the following in my account/modules blade:

        @foreach($modules as $module)
            <livewire:{{ $module->getName() }}::configuration :client="$client" />
        @endforeach

I also tried

        @foreach($modules as $module)
            <livewire:{{ $module->getLowerName() }}::configuration :client="$client" />
        @endforeach

But none of them was getting the render of my configuration components. Finally I had to switch my code to the alternative notation

        @foreach($modules as $module)
            @livewire( $module->getLowerName() . '::configuration', [ 'client' => $client ] )
        @endforeach

This time it was correctly rendered. I don't want to use this notation, can someone explain to me where is the mistake? How do I get them rendered with the first notation?

Answer 1

You can achieve it with Livewire's dynamic component. But the two are functionally equal, so it should be no problem using either one.

Before we dive into the dynamic component, its recommended that you key each dynamic component with wire:key, this should be something unique.

Your working solution, with the added key, would look like this

@livewire($module->getLowerName() . '::configuration', ['client' => $client], key($loop->index))

If you want to use <livewire tag, you can do that with the is component,

<livewire:is :component="$module->getLowerName() . '::configuration'" :client="$client" :wire:key="$loop->index" />