修复 Laravel Livewire 中动态选项卡内容不显示的问题

<div class=" tab-pan fade {{ $key == 0 ? 'active in' : ''}}" 
     id="#category_{{$category->id}}"> 
    <!-- 选项卡内容 -->
</div>

<a href="#category_1" data-toggle="tab"> Category 1 </a>

-<div class=" tab-pan fade {{ $key == 0 ? 'active in' : ''}}" 
-     id="#category_{{$category->id}}">
+<div class=" tab-pan fade {{ $key == 0 ? 'active in' : ''}}" 
+     id="category_{{$category->id}}">
    <!-- 选项卡内容 -->
</div>

<div class="category-tab">
  <div class="col-sm-12">
    <ul class="nav nav-tabs">
      @foreach ($categories as $key=>$category)
        <li class="{{ $key == 0 ? 'active' : '' }}">
          <!-- href 属性使用 # 引用 id -->
          <a href="#category_{{$category->id}}" data-toggle="tab"> 
            {{$category->name}}
          </a>
        </li>
      @endforeach
    </ul>
  </div>
  <div class="tab-content">
    @foreach ($categories as $key=>$category)
      <!-- id 属性只包含标识符，不含 # -->
      <div class=" tab-pan fade {{ $key == 0 ? 'active in' : ''}}" 
           id="category_{{$category->id}}">
        @php
          // 这里的数据库查询建议移至 Livewire 组件的 render 方法中
          $c_products = DB::table('products')-> 
            where('category_id',$category->id)-> 
            get()->take($no_of_products);
        @endphp
        @foreach ($c_products as $c_product)
          <div class="col-sm-3">
            <div class="product-image-wrapper">
              <div class="single-products">
                <div class="productinfo text-center">
                  <img src="{{asset('assets/images/products')}}/{{$c_product->image}}" 
                       alt="{{$c_product->name}}" />
                  <h2>${{$c_product->regular_price}}</h2>
                  <p>{{$c_product->name}}</p>
                  <a href="#" class="btn btn-default add-to-cart">
                    <i class="fa fa-shopping-cart"></i>
                    Add to cart
                  </a>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    @endforeach
  </div>
</div>

<?php
  namespace App\Http\Livewire;
  use App\Models\Category;
  use App\Models\HomeCategory;
  use Livewire\Component;

  class HomeComponent extends Component
  {
    public function render()
    {
      $category = HomeCategory::find(1);
      $cats=explode(',',$category->sel_categories);
      $categories = Category::whereIn('id',$cats)->get();
      $no_of_products=$category->no_of_products;
      return view('livewire.home-component',
                   ['categories'=>$categories,
                    'no_of_products'=>$no_of_products])->
                   layout('layouts.base');
    }
  }