How to pass an array to a @slot in laravel 5.4?

Question

I am trying to use it in my layout and I'm suddenly bump-up with the idea of using the new features of Laravel 5.4 @slot.

Just wondering if passing an array to a slot possible?

        @section('SampleSection')

            @component( 'mylayouts.partials.contentheader' )

                @slot('title')
                    Sample Title
                @endslot

                @slot('indexes')
                    Pass array here  // example [ 'a', 'b', 'c' ]
                @endslot

            @endcomponent

        @endsection

Michaeline

Answer 1

As far as I know, it isn't possible to pass an array to a component via @slot. However, it is possible to pass and an array to a component directly, without using a slot.

From the documentation:

Passing Additional Data To Components

Sometimes you may need to pass additional data to a component. For this reason, you can pass an array of data as the second argument to the @component directive. All of the data will be made available to the component template as variables:

@component('alert', ['foo' => 'bar'])
    ...
@endcomponent

So let's say you have an array of data:

$my_array = ['a', 'b', 'c']

You can pass it to the component like so:

@component('mylayouts.partials.contentheader', ['my_array' => $my_array])
    ...
@endcomponent

Or you can just pass it directly, without using a variable:

@component('mylayouts.partials.contentheader', ['my_array' => ['a', 'b', 'c']])
    ...
@endcomponent

Then, within your component file, you will have access to a $my_array variable. For example, in your contentheader.blade.php file you can do this:

<ul>
    @foreach($my_array as $value)
        <li>{{ $value }}</li>
    @endforeach
</ul>

Pearson

Answer 2

I need the same.

This works as a temporally solution, but is not the best form for do it.

@component('component.tab.header')
    @slot('navs', [
        "a" => "Pepe",
        "b" => "Maria"
    ])
@endcomponent

EDIT:

Finally, in my case, I solved doing this:

@component('component-name')
    @slot('slot-name')
        Value1|Value2|Value2
    @endslot
@endcomponent

And in the component code:

@foreach(explode('|', $slot-name) as $value)
    The value is {{ $value }} <br/>
@endforeach

Noland

Actually tried that one but was having difficulty catching the array in the slot views. What I did is put another '@include' inside the '@component' and using a variable parameters for the slot to work. It's not pretty though... – Michaeline

See my new edit, I thinks this is the more clear-code option. – Noland

I think your original answer is actually the better one. I'm going to try and ask this week in the Slack to see what the intended way is, and hopefully update the documentation after so it is clearer. – Alisander

@Ivan - that's precisely what I did in my previous code but I ended up using @include instead. I just hope Taylor would add functionality to add variable parameters in @slot instead of doing what we just did or there might be better ways to do it. – Michaeline

Answer 3

Here's an example component. Set the number of items to the $numberOfSlots variable and it will search for slot blocks one by one (body_1, body_2, body_3).

Since I'm needed a form wizard and it's not aesthetically pleasing to define HTML blocks between " ", I prefer using @slot.

Component:

<div class="component">
    @for($i = 1; $i <= $numberOfSlots; $i++)
        <div class="item">
            {{ ${"body_{$i}"} }}
        </div>
    @endfor
</div>

---

Blade:

@component(['numberOfSlots' => 3])
    @slot('body_1')
            Dynamically created slot 1
    @endslot

    @slot('body_2')
            Dynamically created slot 2
    @endslot

    @slot('body_3')
            Dynamically created slot 3
    @endslot
@endcomponent

Hakluyt

Works fine so far, specially for lists – Extensile

Answer 4

I may be wrong but couldn't you just pass the data to the component and handle that in the component? Docs show

Sometimes you may need to pass additional data to a component. For this reason, you can pass an array of data as the second argument to the @component directive. All of the data will be made available to the component template as variables:

@component('alert', ['foo' => 'bar']) ... @endcomponent

deal with the data in the component instead of using a slot?

Griffie

Answer 5

it's so simple and easy send array into component template without any @slot in view page

view.blade.php

@component('components.button',[
  'tooltipTitle'=>'buttorr33',
  'addStyle'=>'pointer',
  ])
  @endcomponent

in component php file component\button.php

<div class="block-buttons {{$addStyle or NULL}}"
     {{--if set tooltip, add atributes--}}
     @if (isset($tooltipTitle))...

Rubirubia

@Nelson Melicio sending data into view via array, in view must be variable with the same name like key in associative array. 'toolitipTitle'=>'buttor33' in view file will send it into component which is set at first param. Then in that component file you could use variable with name $tooltipTitle. If it doesn't set it will throw an error – Rubirubia

Answer 6

How I do it:

Include @PageNav component tag in any view

@PageNav([
    'menus' => [
        [
            'title' => 'foo', 
            'url' => '/foo/index'
        ], 
        [
            'title' => 'bar', 
            'url' => '/bar/page'
        ]
    ]
]) @endPageNav

Create view/components/PageNav.php file

@foreach ($menus as $menu)
  <li class="nav-item">
    <a class="nav-link" href="{{ $menu['url'] }}">{{ $menu['title'] }}</a>
  </li>
@endforeach

Register the component: (AppServiceProvider.php -> Boot)

Blade::component('components.PageNav'); // "/views/components/PageNav.php"

Hope it's help!

Hausfrau

Answer 7

Laravel 10 <-- current latest version

https://laravel.com/docs/10.x/blade#passing-data-to-components

<x-mylayouts.partials.contentheader :title="$title" :indexes="$my_array" />

• trailing / means no matching closing tag needed
• this will load /resources/views/components/mylayouts/partials/contentheader.blade.php

Kavanaugh