Livewire组件调用报错：公共方法[storeLike]不存在问题咨询

该报错的核心原因是Livewire的Like组件类中不存在符合要求的storeLike公共方法，常见触发场景如下：

• 方法定义在post-show组件类中，没有写在Like组件类内，前端事件默认只会触发当前绑定组件的内部方法
• 方法的访问权限是private/protected私有/受保护类型，Livewire仅支持调用组件的公共方法
• 方法名拼写错误，大小写、字符和前端绑定的名称不匹配
• 组件类修改后缓存未清理，改动没有生效
• 组件blade模板不符合单根节点规则，导致事件绑定异常

• 确认方法定义位置
  打开Like组件类文件（Livewire 2路径为app/Http/Livewire/Like.php，Livewire 3路径为app/Livewire/Like.php），确保storeLike和destroyLike方法定义在该类中，参考代码如下：

  <?php
  
  namespace App\Livewire; // Livewire 2替换为namespace App\Http\Livewire;
  
  use App\Models\Post;
  use Livewire\Component;
  
  class Like extends Component
  {
      public Post $post;
  
      // 必须为public公共方法
      public function storeLike()
      {
          auth()->user()->likes()->create(['post_id' => $this->post->id]);
          $this->dispatch('post-liked'); // Livewire 2替换为$this->emit('post-liked');
      }
  
      public function destroyLike()
      {
          auth()->user()->likes()->where('post_id', $this->post->id)->delete();
          $this->dispatch('post-unliked'); // Livewire 2替换为$this->emit('post-unliked');
      }
  
      public function render()
      {
          return view('livewire.like');
      }
  }
  

• 校验方法访问权限
  确认两个方法前的修饰符为public，不能使用private或protected修饰符。
• 核对方法名拼写
  确保组件类中的方法名和blade模板wire:click绑定的名称完全一致，方法名大小写敏感。
• 清理缓存
  修改后如果依旧报错，执行以下命令清理缓存：

  php artisan cache:clear
  php artisan view:clear
  php artisan livewire:discover
  

• 修复blade模板根节点问题
  Livewire要求组件模板必须有且仅有一个根节点，你当前的模板存在两个并列的顶级div，会导致事件绑定异常，修改模板代码如下即可：

  <div>
      <div class="w-full flex justify-center mt-3 text-white">
          <x-jet-action-message class="text-white" on="post-liked">
              {{ __('Liked') }} {{$post->title}}
          </x-jet-action-message>
          <x-jet-action-message class="text-white" on="post-unliked">
              {{ __('Unliked') }} {{$post->title}}
          </x-jet-action-message>
      </div>
  
      @if (!$post->likedBy(auth()->user()))
          <div class="mb-7 mt-4 text-center">
              <div class="block items-center">
                  <x-jet-button wire:click.prevent="storeLike" class="bg-blue-500 px-8 py-3 ">Like</x-jet-button>
              </div>
          </div>
      @else
          <div class="mb-7 mt-4 text-center">
              <div class="block items-center">        
                  <x-jet-button wire:click.prevent="destroyLike"  class="bg-red-500 px-8 py-3" >Unlike</x-jet-button>
              </div>
          </div>
      @endif
  </div>
  

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