'Undefined Variable error when using @foreach

I'm currently working on a project in laravel8 and i've been stuck here for so long and i can't see what the problem is ! i'm trying to make the tours page dynamic but i get this: ErrorException Undefined variable: tours (View: C:\xampp\htdocs\project\resources\views\livewire\explore-component.blade.php) HERE IS THE: 'explore-component.blade.php' file :

 @foreach ($tours as $tour)
                
                
                    <li class="col-lg-4 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="product product-style-3 equal-elem ">
                            <div class="product-thumnail">
                                <a href="#" title="{{ $tour->name }}">
                                    <figure><img src="{{ asset('assetss/images/products') }}/{{ $tour->image }}" alt="{{ $tour->name }}"></figure>
                                </a>
                            </div>
                            <div class="product-info">
                                <a href="#" class="product-name"><span>{{ $tour->name }}</span></a>
                                <div class="wrap-price"><span class="product-price">${{  $tour->price_per_person }}</span></div>
                                <a href="#" class="btn add-to-cart">Book Now</a>
                            </div>
                        </div>
                    </li>
                    @endforeach

HERE IS THE: 'ExploreComponent.php' file :

<?php
namespace App\Http\Livewire;
use App\Models\Tour;
use Livewire\Component;
use Livewire\WithPagination;

class ExploreComponent extends Component
 {  
   use WithPagination;
   public function render()
  {
     $tours = Tour::paginate(12);
     return view('livewire.explore-component', ['tours'=> $tours])->layout("livewire.explore- 
     component");
     }
 }


Solution 1:[1]

try this

in ExploreComponent.php

<?php
namespace App\Http\Livewire;
use App\Models\Tour;
use Livewire\Component;
use Livewire\WithPagination;

class ExploreComponent extends Component
 {  
   use WithPagination;
   public function render()
  {
     $tours = Tour::paginate(12);
     return view('livewire.explore-component', ['tours'=> $tours]);
     }
 }

in explore-component.blade.php

<div>
@forelse($tours as $tour)
<li class="col-lg-4 col-md-6 col-sm-6 col-xs-6 ">
                        <div class="product product-style-3 equal-elem ">
                            <div class="product-thumnail">
                                <a href="#" title="{{ $tour->name }}">
                                    <figure><img src="{{ asset('assetss/images/products') }}/{{ $tour->image }}" alt="{{ $tour->name }}"></figure>
                                </a>
                            </div>
                            <div class="product-info">
                                <a href="#" class="product-name"><span>{{ $tour->name }}</span></a>
                                <div class="wrap-price"><span class="product-price">${{  $tour->price_per_person }}</span></div>
                                <a href="#" class="btn add-to-cart">Book Now</a>
                            </div>
                        </div>
                    </li>
@empty
@endforelse
</div>

then call Component

<livewire:explore-component />

Solution 2:[2]

You need to check if it is empty

@empty(!$tours)
    @foreach ($tours as $tour)
       <li class="col-lg-4 col-md-6 col-sm-6 col-xs-6 ">
                <div class="product product-style-3 equal-elem ">
                    <div class="product-thumnail">
                        <a href="#" title="{{ $tour->name }}">
                            <figure><img src="{{ asset('assetss/images/products') }}/{{ $tour->image }}" alt="{{ $tour->name }}"></figure>
                        </a>
                    </div>
                    <div class="product-info">
                        <a href="#" class="product-name"><span>{{ $tour->name }}</span></a>
                        <div class="wrap-price"><span class="product-price">${{  $tour->price_per_person }}</span></div>
                        <a href="#" class="btn add-to-cart">Book Now</a>
                    </div>
                </div>
            </li>
    @endforeach
                    
@else
@endempty

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abdulmajeed
Solution 2 Basim Usman