Question

我有一个名为person的Blade组件，它有不同的插槽我想填充。

＆＃13;

<div class="person">
  <img src="{{ $image_url }}" alt="{{ $image_alt }}">
  {{ $name }}
  {{ $information }}
  <a class="button button-primary" href="{{ $link }}" target="_blank">Homepage</a>
</div>

＆＃13;

我有各种模板文件，我正在做foreach，我想使用人员组件来显示信息。

＆＃13;

@if ($persons)
  @foreach ($persons as $person)
    @component('components.person')
      @slot('image_url')
        {{ $person['person_image'] }}
      @endslot

      @slot('name')
        {{ $person['person_name'] }}
      @endslot

      @slot('information')
        {!! $person['person_information'] !!}
      @endslot

      @slot('link')
        {{ $person['person_link'] }}
      @endslot
    @endcomponent
  @endforeach
@endif

＆＃13;

有时某些字段可能为空。例如，有时某人没有图像或主页，在这种情况下，我不想在主页上显示空白字段。

逻辑说我应该将issset（）或empty（）添加到我的组件文件中，如下所示：

＆＃13;

<div class="person">
  @empty ($image_url)
    <img src="{{ $image_url }}" alt="{{ $image_alt }}">
  @endempty
  
  @isset ($name)
    {{ $name }}
  @endisset
  
  @isset ($information)
    {{ $information }}
  @endisset
  
  @isset ($link)
    <a class="button button-primary" href="{{ $link }}" target="_blank">Homepage</a>
  @endisset  
</div>

＆＃13;

但这似乎根本不起作用。它要么删除所有内容，要么一无所有（取决于是否使用@isset（）或@empty（））。

所以我的问题是：是否可以在foreach循环中有条件地填充组件槽？

Answer 1

最好按照您所说的在上层进行检查，但是请注意，如果它们具有名称槽，则应将某些内容传递到槽中，因此您应该致电：

@slot('myslot')
  @if($myobject->value)
    <h5>
       Show
    </h5>
  @endif
@endslot

Answer 2

这是前一阵子，但是您可以使用null合并运算符定义默认值

<div class="person">
  <img src="{{ $image_url }}" alt="{{ $image_alt }}">
  {{ $name ?? '' }}
  {{ $information ?? '' }}
  <a class="button button-primary" href="{{ $link }}" target="_blank">Homepage</a>
</div>

Answer 3

使用@if和null强制运算符并设置默认值：

<div class="person">
  @if ($image_url ?? null)
    <img src="{{ $image_url }}" alt="{{ $image_alt ?? '' }}">
  @endif

  <span>{{ $name ?? 'No name' }}</span>

  {{ $information ?? null }}


  @if ($link ?? null)
    <a class="button button-primary" href="{{ $link }}" target="_blank">Homepage</a>
  @endif 
</div>

条件刀片组件插槽

3 个答案: