phplaravellaravel-bladelaravel-10laravel-components

Undefined variable $data in Blade component despite passing data from controller


I am working on a Laravel project and I have a Blade component for displaying a data table. However, I am encountering an Undefined variable $data error when trying to pass data from my controller to the Blade component.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;

class UserController extends Controller
{
    public function index()
    {
        $users = User::paginate(10);

        return view('users.index', compact('users'));
    }
}
@extends('layouts.index-base')
@section('title', 'Gestión de Usuarios')
@section('content_header')
    <h1>Lista de Usuarios</h1>
@stop
@section('header')
    <x-column-filter :routes="['trabajadores.index', 'trabajadores.create']" filter="name" placeholder="Ingrese el nombre del usuario" columnSize="4" module="Usuario" />
@stop
@section('table')
    <x-data-table :data="$users" :titles="['DNI', 'Nombre', 'Correo', 'Fecha de Nacimiento', 'Rol', 'Acciones']" :columns="[
        ['key' => 'dni'],
        ['key' => 'name'],
        ['key' => 'email'],
        ['key' => 'fecha_nacimiento'],
        ['key' => 'rol', 'relationship' => true, 'attribute' => 'nombre'],
    ]" :routes="[
        'edit' => 'trabajadores.edit',
        'disable' => 'trabajadores.disable',
        'enable' => 'trabajadores.enable',
    ]" />
@stop
@section('footer-1', $users->links())
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class DataTable extends Component
{
    public $data;
    public $titles;
    public $columns;
    public $routes;

    public function __construct($data, $titles, $columns, $routes)
    {
        $this->data = $data;
        $this->titles = $titles;
        $this->columns = $columns;
        $this->routes = $routes;
    }

    public function render(): View|Closure|string
    {
        return view('components.data-table');
    }
}
<table class="table table-head-fixed table-hover text-nowrap">
    <thead>
        <tr>
            @foreach ($titles as $title)
                <th>{{ $title }}</th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $item)
            <tr>
                @foreach ($columns as $column)
                    @if (isset($column['relationship']) && $column['relationship'])
                        <td>{{ $item->{$column['key']}->{$column['attribute']} }}</td>
                    @else
                        <td>{{ $item->{$column['key']} }}</td>
                    @endif
                @endforeach
                <td>
                    <a href="{{ route($routes['edit'], $item) }}" class="btn btn-warning">
                        <i class="fas fa-pencil-alt"></i>
                    </a>
                    @if ($item->estado)
                        <form action="{{ route($routes['disable'], $item) }}" method="POST" class="d-inline">
                            @csrf
                            @method('patch')
                            <button class="btn btn-danger" type="submit">
                                <i class="fas fa-lock"></i>
                            </button>
                        </form>
                    @else
                        <form action="{{ route($routes['enable'], $item) }}" method="POST" class="d-inline">
                            @csrf
                            @method('patch')
                            <button class="btn btn-success" type="submit">
                                <i class="fas fa-unlock"></i>
                            </button>
                        </form>
                    @endif
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

When I developed it on Manjaro it worked fine and when I tested it on Windows 10, it stopped working, but changing the variable name from $data to $info in both the component and the view, it works fine. However, I would like to understand why $data is causing a problem and how to fix it without changing the variable name.


Solution

  • data is a reserved keyword in Blade components, just like render, resolveView, shouldRender, view, withAttributes and withName.

    You cannot use these as variable names with Blade components.

    Read up on this in the docs: https://laravel.com/docs/11.x/blade#reserved-keywords.