Laravel：刀片 foreach 循环引导列

Posted 2023-02-22

【中文标题】Laravel：刀片 foreach 循环引导列

【英文标题】：Laravel: blade foreach looping bootstrap columns

【发布时间】：2017-05-29 18:33:45

【问题描述】：

我有一个 foreach 循环，其中包含带有引导列的 html。

@foreach($address as $add)
    <div class="col-md-6">
        Some data
    </div>
@endforeach

但是，引导程序在创建列之前需要行 div，将其直接放入 foreach 循环将为每个 col-md-6 创建一个行 div。我想知道如何在行 div 中输入，跳过下一个循环，只输入结束 div 标记。然后重复这个过程。

循环 4 次的示例输出：

<div class="row">
    <div class="col-md-6">
        Some data
    </div>
    <div class="col-md-6">
        Some data
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        Some data
    </div>
    <div class="col-md-6">
        Some data
    </div>
</div>

【参考方案1】：

作为 Alexey Mezenin 的答案的替代方案，您可以改用 array_chunk。 http://php.net/manual/en/function.array-chunk.php

@foreach(array_chunk($address, 2) as $chunk)
    <div class="row">
        @foreach($chunk as $add)
            <div class="col-md-6">
                Some data
            </div>
        @endforeach
    </div>
@endforeach

我个人觉得上面的内容更具可读性。

或者，如果$address 是一个集合，您可以使用$address->chunk(2) 而不是array_chunk($address, 2)。

如果您想更改列数，只需将2 更改为您想要的列数。

【讨论】：

这是一种优雅的方式。谢谢。

@SaadSuri 你是绝对正确的。不过，我已经在我的回答中得到了这个答案；）

对不起，我没有看到那部分。我已经对答案感到惊讶，所以忘了阅读剩下的部分:)

@SaadSuri 没关系。我也没有马上意识到它:)

当我使用$add->name 时，它显示错误``尝试获取非对象属性``！！

【参考方案2】：

你可以在刀片模板中使用 Laravel 块。

@foreach($products->chunk(3) as $items)
<div class="row">
   @foreach($items as $item)
   <div class="col-md-4 portfolio-item">
      <a href="#">
      <img class="img-responsive" src=" 'uploads/'.$item->product_image_url " >
      </a>
      <h3>
         <a href="/view-product-details/ $item->id "> $item->product_name </a>
      </h3>
      <p> str_limit($item->product_description, 121) </p>
   </div>
   @endforeach
</div>
@endforeach

复制自blogpost。

【参考方案3】：

使用the $loop variable:

<div class="row">
    @foreach($address as $add)
        <div class="col-md-6">
            Some data
        </div>
        @if ($loop->iteration % 2 == 0)
            </div>
            <div class="row">
        @endif
    @endforeach
</div>

【讨论】：

我的整个网站都崩溃了，我收到 [Vue 警告]：模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如

@ThomasCharlesworth 我没有放置任何标签，例如<script>。这是标准的 Blade 模板代码。请解释一下你想表达什么？

我在 foreach 之外遗漏了第一个 div，我不知道为什么，但这会导致网站与 vue 警告一起中断。感谢您的解决方案！