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?

score 1 · Accepted Answer · answered Aug 22 '21 at 08:12

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" />

answered Aug 22 '21 at 08:12

Qirel

25,449
7
45
62

I marked the answer as correct because the first part of the answer is correct and for most of the dynamically loaded livewire components the livewire:is approach works fine. but :component="$module->getLowerName . '::configuration'" does not work, and the reason is that to call a class inside the :component you need to use single quotes surrounding it like this: :component="'SomeClass::some.component'" and of course it is not possible like that. I even tried using '{{ }}' and it never worked. But in the end that was the most helpful answer (and the only answer) – Tales Sep 06 '21 at 15:29

Calling dynamic content with blade (Livewire)

1 Answers1