get subcategory in laravel or livewire

Question

I'm using Livewire version 2. I wanted to show all the categories on the site. Mother category = 0 The subset of these categories is parent_id = 1. How can I get this subset relation?

For example : I have a category called TV so far ok I want to add a Samsung or LG category to this TV.

ProductCategory model:

    public function parent_name($id)
    {
        $name_parent = ProductCategory::where('id' , $id)->first();

        if (!$name_parent) {
            return 'دسته بندی مادر';
        } else {
            $name_parent = $name_parent->topic;
            return $name_parent;
        }
    }

Livewire component:

class HeaderBottom extends Component
{
    public $category;

    public function mount(ProductCategory $category)
    {
        $this->category = $category;
    }

    public function render()
    {
        $a = 1;
        $allCategories = ProductCategory::where('parent_id', '=', 0)->latest()->get();
        $subcategory = ProductCategory::where('parent_id', '=', $a)->latest()->get();

        return view('livewire.site.layout.header.header-bottom', compact(['allCategories','subcategory']));
    }
}

my blade:

<div class="dropdown-menu">
  <nav class="side-nav">
    <ul class="menu-vertical sf-arrows">
      {{-- 
      <li class="item-lead">
        <a href="{{ route('site.productCategory.index', 2) }}">
          تخفیف
                                        های روزانه
        </a>
      </li>
      <li class="item-lead">
        <a href="{{ route('site.productCategory.index', 3) }}">
          هدیه
                                        ها
        </a>
      </li>
      --}}

      @foreach ($allCategories as $category)
        <li>
          <a href="{{ route('site.productCategory.index', $category->id) }}">
            {{ $category->topic }}
          </a>
        </li>
      @endforeach
      
      <li class="megamenu-container">
        <a class="sf-with-ul" href="#">
          {{ $category->parent_name($category->parent_id) }}
        </a>
        <div class="megamenu" style="display: none;">
          <div class="row no-gutters">
            <div class="col-md-8">
              <div class="menu-col">
                <div class="row">
                  <div class="col-md-6">
                    @foreach ($subcategory as $item)
                      <div class="menu-title">
                        <a href="{{ route('site.productCategory.index', $item->id) }}">
                          {{ $item->topic }}
                        </a>
                      </div>
                    @endforeach
                  </div><!-- End .col-md-6 -->
                </div><!-- End .row -->
              </div><!-- End .menu-col -->
            </div><!-- End .col-md-8 -->
            <div class="col-md-4">
              <div class="banner banner-overlay">
                <a href="category.html" class="banner banner-menu">
                  <img src="assets/images/demos/demo-13/menu/banner-2.jpg" alt="بنر">
                </a>
              </div><!-- End .banner banner-overlay -->
            </div><!-- End .col-md-4 -->
          </div><!-- End .row -->
        </div><!-- End .megamenu -->
      </li>
    </ul><!-- End .menu-vertical -->
  </nav><!-- End .side-nav -->
</div>

Answer 1

Maybe you could use wire:click to set the subCategories.

<a class="sf-with-ul" href="#" wire:click="getSubcategoriesFor({{ $category->id }})">
  {{ $category->parent_name($category->parent_id) }}
</a>

class HeaderBottom extends Component
{
    public $category;
    public $subcategories = [];

    public function mount(ProductCategory $category)
    {
        $this->category = $category;
    }

    public function render()
    {
        $allCategories = ProductCategory::where('parent_id', '=', 0)->latest()->get();

        return view('livewire.site.layout.header.header-bottom', compact('allCategories'));
    }

    public function getSubcategoriesFor($parent_id)
    {
        $this->subcategories = ProductCategory::where('parent_id', $parent_id)->latest()->get()->all();
    }
}