Блог

Я хочу увеличивать глубину int каждый раз, когда дочерние элементы находятся в элементе, чтобы я мог дополнять a тег.

Ниже приведен мой код, и я предположил, что это сработает, однако число остается равным 1, даже если у меня есть дочерние элементы в одном из элементов внутри $items .

sidebar.blade.php

 <nav class="flex flex-col mt-10">
    <ul class="pl-4">
        @foreach($items as $item)
        <x-layouts.sidebar.items :item="$item"></x-layouts.sidebar.items>
        @endforeach
    </ul>
</nav>
 

sidebar.items.blade.php

 <li>
    @if(count($item) > 0)
        <a href="{{ $item['href'] }}" class="focus:text-blue-500 dark-focus:text-blue-400 focus:outline-none w-full transition duration-500 ease-in-out pl-4 py-2 text-gray-700 dark:text-gray-400 hover:bg-blue-200 dark-hover:bg-blue-500 transition duration-500 ease-in-out block">
            {{ $item['text'] }} {{ $depth }}
        </a>
        @if (count($item['children']) > 0)
            <ul class="pl-4">
                @foreach($item['children'] as $child)
                    <x-layouts.sidebar.items :item="$child" :depth="$loop->parent->index"></x-layouts.sidebar.items>
                @endforeach
            </ul>
        @endif
    @else
        <hr>
    @endif
</li>
 

SidebarItems.php

 <?php

namespace AppViewComponentsLayoutsSidebar;

use IlluminateViewComponent;
use IlluminateViewView;

class Items extends Component
{

    /**
     * @var array
     */
    public $item;

    /**
     * @var int
     */
    public $depth;

    /**
     * Create a new component instance.
     *
     * @param array $item
     * @param int   $depth
     */
    public function __construct($item = [], $depth = 1)
    {
        $this->item = $item;
        $this->depth  = $depth;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return View|string
     */
    public function render()
    {
        return view('components.layouts.sidebar.items');
    }
}
 

Данные:

 $this->items = [
    [ 'href' => '/home', 'text' => 'Home', 'children' => [], 'active' => 'border-l-2 border-blue-500' ],
    [ 'href' => 'javascript:void(0)', 'text' => 'Test', 'children' => [], 'active' => '' ],
    [ 'href' => 'javascript:void(0)', 'text' => 'Websites', 'children' => [], 'active' => '' ],
    [ 'href' => 'javascript:void(0)', 'text' => 'Websites', 'children' => [], 'active' => '' ],
    [],
    [
        'href' => '/administration',
        'text' => 'Administration',
        'children' => [
            [
                'href' => 'javascript:void(0)',
                'text' => 'Locked Devsites',
                'active' => '',
                'children' => []
            ]
        ],
        'active' => ''
    ],
    [ 'href' => 'javascript:void(0)', 'text' => 'Documentation', 'children' => [], 'active' => '' ],
    [ 'href' => 'javascript:void(0)', 'text' => 'Logout', 'children' => [], 'active' => '' ]
];
 

Результат:

 Home 1
Test 1
Websites 1
Websites 1
Administration 1
Locked Devsites 5
Documentation 1
Logout 1
 

Если я правильно понимаю, чего вы хотите достичь, вам даже не нужно $depth свойство, поскольку директива блейда @foreach имеет собственное свойство глубины, которое сообщает вам, насколько вы вложены.

В вашем коде вместо использования:

 :depth="$depth"
 

используйте:

 :depth="$loop->depth"