Including, extending and yielding inside a loop

sage
,
1

On my home I’m getting the recent posts, including the components.project-card which extends components.grid-item and yields the @section('grid-item__content'), printing the item $type.

template-home.blade.php:

A loop iterates through my recent posts and for each entry it does a

@include('components.project-card', ['item' => $item, ...somethingies])
components/project-card.blade.php:
@extends('components.grid-item', ['type' => $item['type'], ...morethingies])

@section('grid-item__content')
    {{ $item['type'] }}
@endsection
components/grid-item.blade.php:
<div class="grid__item" data-type="{{ $type }}">
	@yield('grid-item__content')
</div>

However, the {{ $item['type'] }} is printing the value of the first entry for all others.

Let’s suppose I have 4 posts with the type as: [‘text’,‘news’,‘project’,‘project’]. The output would be:

<div class="grid__item" data-type="text">
	text
</div>
<div class="grid__item" data-type="news">
	text
</div>
<div class="grid__item" data-type="project">
	text
</div>
<div class="grid__item" data-type="project">
	text
</div>

Obs: Note that the data-type is correct.

Am I doing something wrong? I’m still learning blade :wink:

2

You should probably take a look at the Blade docs, specifically what a layout is and what @extends does. What really sticks out to me is you’re trying to pass data with @extends, which really only tells Blade which layout to use (like the theme wrapper). There is no passing data back to the layout.

That should help you get going correctly.

1 Like
3

First of all, thanks for your reply!

Ok, I removed the data from the @extendand left it to the @include. So now I have:

template-home.blade.php:

A loop iterates through my recent posts and for each entry it does a

@foreach($items as $item)
    @include('components.project-card', ['item' => $item])
@endforeach
components/project-card.blade.php:
@extends('components.grid-item')

@section('grid-item__content')
    {{ $item['type'] }}
@endsection
components/grid-item.blade.php:
<div class="grid__item" data-type="{{ $item['type'] }}">
	@yield('grid-item__content')
</div>

This still outputs the same as before. With 4 items (text, news, project, project), it always prints “text”, “text”, “text”, “text”.

4

A more testable example:

page.blade.php:
@extends('layouts.base')

@section('content')
  @php
    $testValues = ['1', '2', '3']
  @endphp
  @foreach ($testValues as $testValue)
    Current number: {{ $testValue }}  
    @include('partials.c2', ['test' => $testValue])
  @endforeach
@endsection
partials/c2.blade.php:
@extends('partials.c1')

@section('c-content')
  {{ $test }}
@endsection
partials/c1.blade.php:
<div class="custom-class">
  Inside the extend: {{ $test }}
  <br>
  Inside the section: @yield('c-content')
</div>

Prints:

Current number: 1
Inside the extend: 1
Inside the section: 1

Current number: 2
Inside the extend: 2
Inside the section: 1

Current number: 3
Inside the extend: 3
Inside the section: 1

Ps: I’m probably doing something pretty much idiotic, sorry :frowning:

Ps²: I’ve just tested it on a bare laravel project and the same thing happened. Yeah, I’m definitely trying to do something wrong :laughing:

Ps³: I’ve just found this

5

You absolute legend, thanks for this - was hit by exactly the same issue, the data not resetting when extending layouts within a loop.

So terminating the @section with @overwrite instead of @endsection is the key!