Undefined variable $services - php

Question

I have this error. I did this a couple of times on a different pages with different subjects , but with the same method. It always worked. But for some reason now I'm getting this error.
Undefined variable $services (View:C\xampp\htdocs\accounting\resources\views\livewire\service-table.blade.php)
Possible type $services Did you mean $errors?
Web route
//Service Controller
Route::resource('service', ServiceController::class)->middleware('auth');
Model
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Service extends Model
{
public $table = 'service';
use HasFactory;
protected $fillable = [
'service_name',
'service_description',
'service_cost'
];
}
My controller
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Service;
use Illuminate\Support\Facades\DB;
class ServiceController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$services = Service::orderBy('id', 'asc')->paginate(5);
return view('service.index', compact('services'))->with(request()->input('page'));
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//Validate the input
$request->validate([
'service_name' => 'required',
'service_cost' => 'required',
'service_description' => 'required'
]);
Service::create($request->all());
return redirect()->route('service.index')->with('success', 'The service was created successfully');
}
/**
* Display the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
Livewire table
<div>
<table class="table table-borderless">
<thead>
<tr>
<th style="width: 5%">Id</th>
<th style="width: 25%">Service Name</th>
<th style="width: 20%">Service Cost</th>
<th style="width: 25%">Service Description</th>
<th style="width: 10%">EDIT/DELETE</th>
</tr>
</thead>
<tbody>
#foreach($services as $service)
<tr>
<td class="table_row_middle">{{$service->id}}</td>
<td class="table_row_middle">{{$service->service_name}}</td>
<td class="table_row_middle">{{$service->service_cost}}</td>
<td class="table_row_middle">{{$service->service_description}}</td>
<td>
<form action="{{route('service.destroy', $service->id)}}" method="post">
#csrf
#method('DELETE')
<div class="flex float-right">
<a class="btn btn-primary" style="margin-right: 10px;" href="{{route('service.edit', $service->id)}}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
</a>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete_service">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-x" viewBox="0 0 16 16">
<path d="M6.854 7.146a.5.5 0 1 0-.708.708L7.293 9l-1.147 1.146a.5.5 0 0 0 .708.708L8 9.707l1.146 1.147a.5.5 0 0 0 .708-.708L8.707 9l1.147-1.146a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
</button>
<div class="modal" tabindex="-1" id="delete_service">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete the service</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Do you want to delete: {{$service->service_name}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger flex " data-bs-toggle="modal" data-bs-target="#delete_service">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-x" viewBox="0 0 16 16">
<path d="M6.854 7.146a.5.5 0 1 0-.708.708L7.293 9l-1.147 1.146a.5.5 0 0 0 .708.708L8 9.707l1.146 1.147a.5.5 0 0 0 .708-.708L8.707 9l1.147-1.146a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
Delete
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="col-md-12 p-2">
{!! $services->links() !!}
</div>
</div>
And here is the view
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Services') }}
</h2>
</x-slot>
<div class="container mt-5 p-1" style="max-width: 1280px;">
<div class="row">
<div class="col-sm-3 mb-5">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
#if($errors->any())
<div class="alert alert-danger" style="margin:1rem;">
<ul>
#foreach($errors->all() as $error)
<li>
{{$error}}
</li>
#endforeach
</ul>
</div>
#endif
#if($message = Session::get('success'))
<div class="alert alert-success" style="margin:1rem;">
<p>{{$message}}</p>
</div>
#endif
<!--Add new Client-->
<form action="{{route('service.store')}}" method="post">
#csrf
<div class="col-md-12 p-1">
<label for="serviceName" class="form-label">Service</label>
<input type="text" class="form-control" id="serviceName" name="service_name">
</div>
<div class="col-md-12 p-1">
<label for="serviceCost" class="form-label">Service Cost (EUR/HOUR)</label>
<input type="text" class="form-control" id="serviceCost" name="service_cost">
</div>
<div class="col-md-12 p-1">
<label for="serviceDescription" class="form-label">Service Description</label>
<textarea type="text" rows="3" class="form-control" id="serviceDescription" name="service_description"></textarea>
</div>
<div class="col-md-12 p-1">
<button type="submit" class="btn btn-primary">Add New Service</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<livewire:service-table/>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>

Answer 1

You are sending data to the wrong view. You are sending data to service.index view but trying to get it in livewire\service-table so change the view like below then you can get it.
as the error explains it
Undefined variable $services (View:C\xampp\htdocs\accounting\resources\views\livewire\service-table.blade.php)
the problem is here return view('service.index', compact('services'))->with(request()->input('page'));
Try this
public function index()
{
$services = Service::orderBy('id', 'asc')->paginate(5);
return view('livewire.service-table', compact('services'))->with(request()->input('page'));
}

Answer 2

So the answer is simple, I passed the $services variable to the services.index page however because I included the livewire table the table did not get the $services variable. I just forgot that I have to pass the $services variable to the services-table.view on the table controller.
The problem is solved. Thank you for your help !