Pass Blade Component Parameters from Array

Question

I am trying to pass some parameters to a blade component from an array.

Here is how I pass them:

@php
    $buttons = array(
        array(
            "type" => "button",
            "content" => "Button 1",
            "leadingIcon" => "plus",
            "trailingIcon" => "plus"
        ),
        array(
            "type" => "button",
            "content" => "Button 2",
            "leadingIcon" => "plus",
            "trailingIcon" => "plus"
        ),
        array(
            "type" => "button",
            "content" => "Button 3",
            "leadingIcon" => "plus",
            "trailingIcon" => "plus"
        ),
        array(
            "type" => "button",
            "content" => "Button 4",
            "leadingIcon" => "plus",
            "trailingIcon" => "plus"
        ),
    );
@endphp

<x-buttons-group :buttons="$buttons" size="small" style="secondary" fullWidth="false"/>

Now, inside the <x-buttons-group> component I am trying to do a loop with <x-buttons-button> that needs a parameters I just passed with the array.

Here is a source code for the :

<div class="{!!$fullWidth!!} flex flex-row space-x-0 overflow-hidden rounded-lg border {!!$borderColor!!}">
    <ul class="flex w-full flex-row space-x-0">
        @foreach($buttons as $button)
        <li class="children:border-0 children:rounded-none w-full border-r {!!$borderRightColor!!} last:border-r-0">
            <x-buttons-button @foreach($button as $key => $value) :{!!$key!!}="{!!$value!!}" @endforeach />
        </li>
        @endforeach
    </ul>
</div>

Now, the problem is that when I view the source of the page this is what I get:

<div class="flex w-auto flex-row space-x-0 overflow-hidden rounded-lg border border-gray-300">
    <ul class="flex w-full flex-row space-x-0">
        <li class="children:border-0 children:rounded-none w-full border-r border-r-gray-300 last:border-r-0">
            <x-buttons-button :type="button" :content="Button 1" :leadingIcon="plus" :trailingIcon="plus" />
        </li>
        <li class="children:border-0 children:rounded-none w-full border-r border-r-gray-300 last:border-r-0">
            <x-buttons-button :type="button" :content="Button 2" :leadingIcon="plus" :trailingIcon="plus" />
        </li>
        <li class="children:border-0 children:rounded-none w-full border-r border-r-gray-300 last:border-r-0">
            <x-buttons-button :type="button" :content="Button 3" :leadingIcon="plus" :trailingIcon="plus" />
        </li>
        <li class="children:border-0 children:rounded-none w-full border-r border-r-gray-300 last:border-r-0">
            <x-buttons-button :type="button" :content="Button 4" :leadingIcon="plus" :trailingIcon="plus" />
        </li>
    </ul>
</div>

So... Instead of the component being rendered, it passes a raw line of text like <x-buttons-button :type="button" :content="Button 4" :leadingIcon="plus" :trailingIcon="plus" />.

Any idea about how I can solve this?

Wouldn't you want to have something like @foreach(...)<x-buttons-button...>@endforeach? — user8034901
– user8034901, Commented Aug 16, 2022 at 17:46
@brombeer this will not work because I need @foreach for the component parameters. I already have another @foreach above the <li> inside the <x-buttons-group> component source code. — Andrei RRR
– Andrei RRR, Commented Aug 16, 2022 at 18:01
Why loop? Don't you just pass the $button into the component as :button="$button" — Snapey
– Snapey, Commented Aug 16, 2022 at 18:18
The first loop is used to determine the number of buttons passed inside <x-buttons-group>. The second loop is used to get all parameters for each button <x-buttons-button>. — Andrei RRR
– Andrei RRR, Commented Aug 16, 2022 at 18:25

Andrei RRR · Accepted Answer · 2022-08-16 18:30:10Z

1

Discovered the way to do it. The answer was Blade::render.

Here is the new source for <x-buttons-group>:

<div class="{!! $fullWidth !!} {!! $borderColor !!} flex flex-row space-x-0 overflow-hidden rounded-lg border">
    <ul class="flex w-full flex-row space-x-0">
        @foreach ($buttons as $params)
            <li class="children:border-0 children:rounded-none {!! $borderRightColor !!} w-full border-r last:border-r-0">
                @php
                    foreach ($params as $key => $value) {
                        $param .= ' '.$key.'="'.$value.'"';
                    }
                    echo Blade::render('<x-buttons-button name="name" '.$param.' />');
                @endphp
            </li>
        @endforeach
    </ul>
</div>

answered Aug 16, 2022 at 18:30

Andrei RRR

3,19317 gold badges49 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass Blade Component Parameters from Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related