[Proposal] Passing blade component data to slot

[MrWeb]

I have a component dashboard-card.blade.php which is structured this way:

<div class="mb-4 col-sm-6 col-lg-4">
	<div class="card-small card">
<div class="border-bottom card-header">
		<h6 class="m-0">{{$title}}</h6>
	</div>
	<div class="p-0 card-body">
		<div class="list-group-small list-group list-group-flush">
			{{$slot}}
		</div>
	</div>
	<div class="border-top card-footer">
		<div class="row">
			<div class="text-right view-report col">
				<a href="{{$link}}" class="" target="_self">{{$goto}} &rarr;</a>
			</div>
		</div>
	</div>
</div>
</div>

This is rendered in my blade view:

<x-dashboard-card title="Reports" goto="Vai ai Report" link="reports/index/weekly">
	<div class="d-flex px-3 list-group-item">
		<span class="text-semibold text-danger">Report da compilare</span>
		<span class="ml-auto text-right text-semibold text-danger">{{$count}}</span>
	</div>
</x-dashboard-card>

In this blade view I placed a {{$count}} variable within the slot and I'm trying to set it from the DashboardCard.php class:

    public $title;
    public $count = 0;
    public $link;
    public $goto;

    public function __construct($title, $link, $goto)
    {
        $this->title = $title;
        $this->link  = $link;
        $this->goto  = $goto;
    }

I was expecting to have the count show 0 but it actually returns an error Undefined variable: slot (View: /resources/views/pages/dashboard.blade.php)

As far as I understand there is no way to pass data from the blade component to the inner slot, wouldn't it be useful?

[aguingand]

As a Vue developper using Laravel, I have this need for a long time!

What about a function ?

{{ $slot([ 'count' => $count ]) }}

Like so, I am able to control what variables are exposed to the slot.

Also, we may need another syntax when we use the slot like {{ $scope->count }} to prevent variables clashing.

[ben182]

You should be able to access $count in the slot via the $component variable

[kuus]

for future visitors here are the docs about Scoped slots that explain the $component variable mentioned by @ben182 https://laravel.com/docs/8.x/blade#scoped-slots

I guess this can be closed?

[luilliarcec]

But what if I want to do something like this.

<x-form :model="$user"> <x-input name="username"></x-input> </x-form>

In this case, I want to access the form model from my input component.

[torshid]

for future visitors here are the docs about Scoped slots that explain the $component variable mentioned by @ben182 laravel.com/docs/8.x/blade#scoped-slots

I guess this can be closed?

This is good but not enough for my use case which should be quite common: in my component I have a @foreach from which I call @slot, and I need to access the loop's variable in the slot. This is not possible currently. I found this package which let's me do this, but it only works with @component. Would be excellent to see something similar implemented.

[vanderb]

Hi @torshid The fact x-components are based on @component-directives makes it entirely possible to work with your suggested package.

Component-View

@foreach($items as $item)
  @isset($xSlotName)
    {{ $mySlotScope($item) }}
  @endisset
@endforeach

Place where component is called

<x-my-component>
  <x-slot name="xSlotName">
    @scopedslot('mySlotScope', ($item))
      Item: {{ $item }}
    @endslotscope
  </x-slot>
</x-my-component>

Sure it looks a bit ugly and set attributes directly on x-slot will be much more readable. But for now that should do the trick.

[daniesy]

Any updates on this proposal? It would be a very useful feature for scoped slots.