Laravel Livewire组件渲染正常，点击按钮却提示找不到组件

问题描述 #

页面及组件值能正常渲染，但点击按钮触发方法时，提示“Unable to find component: [app.http.livewire.actions]”错误。相关文件代码如下：

Livewire组件类（app\Http\Livewire\Actions.php） #

namespace App\Http\Livewire;

use Livewire\Component;

class Actions extends Component
{   
    public $value="hi";

    public function call()
    {
        $this->value = 'bye';
    }

    public function render()
    {
        return view('livewire.actions');
    }
}

Blade视图文件（views/livewire/actions.blade.php） #

<button wire:click="call">SUM</button>
{{$value}}
</div>

解决方案 #

• 修正组件文件名大小写：Livewire对类与文件名的大小写严格匹配，组件类名为Actions，对应文件名必须是Actions.php（而非actions.php），确保文件路径为app/Http/Livewire/Actions.php。

• 移除Blade文件无效标签：视图末尾多余的</div>会破坏DOM结构，导致Livewire JS无法正常识别组件，删除后代码如下：

  <button wire:click="call">SUM</button>
  {{$value}}
  

• 清除Livewire缓存：执行命令刷新组件缓存，确保新配置生效：

  php artisan livewire:clear
  php artisan cache:clear
  

• 确认路由/组件引用正确性：

  • 若通过路由直接渲染组件，确保路由定义正确：

    Route::get('/action', \App\Http\Livewire\Actions::class);
    

  • 若在父视图中引用组件，使用正确的Blade指令：

    <livewire:actions />
    

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