Laravel+Livewire报错：无法找到Productos组件求助

问题详情 #

运行php artisan serve时触发Livewire\Exceptions\ComponentNotFoundException错误，提示无法找到组件: [Productos]，错误关联resources\views\welcome.blade.php第278行的@livewire('Productos')代码，请求地址为GET 127.0.0.1:8000。

环境信息 #

• PHP 8.2.12
• Laravel 12.1.1
• 开发者为Laravel+Livewire新手，参考教程开发产品CRUD组件

已尝试的无效解决方法 #

• 重新执行php artisan make:livewire productos
• 确认Livewire已安装
• 清理缓存并执行数据库迁移
• 在app.blade.php中添加@livewireStyles和@livewireScripts
• 修改组件引用为@livewire('productos')
• 重启服务及项目
• 修改组件名称大小写

相关代码文件 #

1. 控制器文件 app/Http/Controllers/ProductoController.php #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Services\ProductoService;

class ProductoController extends Controller
{
    protected $productoService;

    public function __construct(ProductoService $productoService)
    {
        $this->productoService = $productoService;
    }

    public function store(Request $request)
    {
        $status = $this->productoService->insertarProducto($request->all());
        return response()->json(['success' => $status == 1]);
    }

    public function update(Request $request, $id)
    {
        $status = $this->productoService->actualizarProducto($id, $request->all());
        return response()->json(['success' => $status == 1]);
    }

    public function show($id)
    {
        return response()->json($this->productoService->obtenerProducto($id));
    }

    public function destroy($id)
    {
        $status = $this->productoService->borrarProducto($id);
        return response()->json(['success' => $status == 1]);
    }
}

2. Livewire 类文件 app/Livewire/Productos.php #

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\DB;

class Productos extends Component
{
    public $productos, $producto_id, $nombre, $descripcion, $precio;

    public function render()
    {
        $this->productos = DB::select("CALL obtenerTodosLosProductos()");
        return view('livewire.productos');
    }

    public function guardarProducto()
    {
        if ($this->producto_id) {
            DB::statement("CALL actualizarProducto(?, ?, ?, ?, @p_status)", 
                [$this->producto_id, $this->nombre, $this->descripcion, $this->precio]);
        } else {
            DB::statement("CALL insertarProducto(?, ?, ?, @p_status)", 
                [$this->nombre, $this->descripcion, $this->precio]);
        }

        $this->resetCampos();
    }

    public function editarProducto($id)
    {
        $producto = DB::select("CALL obtenerProducto(?)", [$id])[0];
        $this->producto_id = $producto->id;
        $this->nombre = $producto->nombre;
        $this->descripcion = $producto->descripcion;
        $this->precio = $producto->precio;
    }

    public function eliminarProducto($id)
    {
        DB::statement("CALL borrarProducto(?, @p_status)", [$id]);
    }

    public function cancelarEdicion()
    {
        $this->resetCampos();
    }

    private function resetCampos()
    {
        $this->producto_id = null;
        $this->nombre = '';
        $this->descripcion = '';
        $this->precio = '';
    }
}

3. Livewire 视图文件 resources/views/livewire/productos.blade.php #

<div>
    <h2 class="text-2xl font-bold mb-4">Gestión de Productos</h2>

    {{-- Formulario para agregar y editar productos --}}
    <form wire:submit.prevent="guardarProducto">
        <div class="mb-2">
            <label class="block text-gray-700">Nombre:</label>
            <input type="text" wire:model="nombre" class="w-full p-2 border rounded">
        </div>

        <div class="mb-2">
            <label class="block text-gray-700">Descripción:</label>
            <textarea wire:model="descripcion" class="w-full p-2 border rounded"></textarea>
        </div>

        <div class="mb-2">
            <label class="block text-gray-700">Precio:</label>
            <input type="number" step="0.01" wire:model="precio" class="w-full p-2 border rounded">
        </div>

        <button type="submit" class="bg-blue-500 text-white p-2 rounded">
            {{ $producto_id ? 'Actualizar Producto' : 'Agregar Producto' }}
        </button>

        @if($producto_id)
            <button type="button" wire:click="cancelarEdicion" class="bg-gray-500 text-white p-2 rounded ml-2">
                Cancelar
            </button>
        @endif
    </form>

    {{-- Tabla de productos --}}
    <table class="table-auto w-full mt-4 border-collapse border border-gray-200">
        <thead>
            <tr class="bg-gray-100">
                <th class="border p-2">ID</th>
                <th class="border p-2">Nombre</th>
                <th class="border p-2">Descripción</th>
                <th class="border p-2">Precio</th>
                <th class="border p-2">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($productos as $producto)
                <tr>
                    <td class="border p-2">{{ $producto->id }}</td>
                    <td class="border p-2">{{ $producto->nombre }}</td>
                    <td class="border p-2">{{ $producto->descripcion }}</td>
                    <td class="border p-2">${{ number_format($producto->precio, 2) }}</td>
                    <td class="border p-2">
                        <button wire:click="editarProducto({{ $producto->id }})" class="bg-yellow-500 text-white p-1 rounded">
                            Editar
                        </button>
                        <button wire:click="eliminarProducto({{ $producto->id }})" class="bg-red-500 text-white p-1 rounded">
                            Eliminar
                        </button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

4. Welcome 视图文件 resources/views/welcome.blade.php 相关代码 #

第一种引用方式：

...
    @livewireStyles
@livewireScripts
</body>
</html>

第二种引用方式：

@if (Route::has('login'))
    <div class="h-14.5 hidden lg:block"></div>
    <div class="container mx-auto p-4">
        @livewire('productos')
    </div>
@endif

@livewireScripts
</body>

内容的提问来源于stack exchange，提问作者reymagnus