title: laravel Livewire wire:click not firing the function
body: <p>I want to do a SPA with laravel livewire, i want to use wire:click to fire a funtion in the component but it not working , excuse me if the code mess its my first time posting here and i am not sure of what to post here of my code to make these problem solve thank you</p>
  <p>main.blade.php</p>
  <pre><code>@section('content')
  &lt;div&gt;
      &lt;div class=&quot;row justify-content-center&quot;&gt;
          &lt;div class=&quot;col-12&quot;&gt;
              &lt;div class=&quot;card my-3&quot;&gt;
  
                          &lt;!-- header --&gt;
                  &lt;div class=&quot;card-header d-inline-flex&quot;&gt;
                      &lt;h3 class='mr-2'&gt;Categories&lt;/h3&gt;
                      &lt;div&gt;
                          &lt;a href=&quot;javascript:void(0);&quot; wire:click='createCategory' class=&quot;btn btn-success &quot;&gt;Add NewCategory&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- header --&gt;
                  &lt;div class=&quot;card-body&quot;&gt;
  
                      &lt;!-- alerts --&gt;
                      @include('admin.includes.alerts.errors')
                      @include('admin.includes.alerts.success')
                      &lt;!-- alerts --&gt;
  
  
                      &lt;!-- if True , create form will show , if not will stay disabled --&gt;
                      @if ($showCreateForm)
                      @livewire('admin.category.create' )
                      @endif
                      &lt;!-- if True , create form will show , if not will stay disabled --&gt;
  
                      &lt;!-- Table --&gt;
                      &lt;div class=&quot;table-responsive&quot;&gt;
                          &lt;table id=&quot;example2&quot; class=&quot;table table-bordered table-hover&quot;&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;ID&lt;/th&gt;
                                      &lt;th&gt;Image&lt;/th&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Slug&lt;/th&gt;
                                      &lt;th&gt;Status&lt;/th&gt;
                                      &lt;th&gt;Parent&lt;/th&gt;
                                      &lt;th&gt;Action&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  @foreach ($categories as $category)
                                  &lt;tr&gt;
                                      &lt;td&gt;{{$category-&gt;id}}&lt;/td&gt;
                                      {{-- &lt;td&gt;{{storage_path(app\livewire-tmp\$category-&gt;image)}}&quot; /&gt;&lt;/td&gt; --}}
                                      &lt;td&gt;{{$category-&gt;name}}&lt;/td&gt;
                                      &lt;td&gt;{{$category-&gt;slug}}&lt;/td&gt;
                                      &lt;td class=&quot; {{$category-&gt;isActive()==='Active'? 'text-success':'text-danger'}}&quot;&gt;
                                          {{$category-&gt;isActive()}}&lt;/td&gt;
                                      &lt;td&gt;{{ !empty($category-&gt;parent) ? $category-&gt;parent-&gt;name:'' }}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;a href=&quot;&quot; class=&quot;btn btn-warning&quot;&gt;Edit&lt;/a&gt;
                                          &lt;a href=&quot;&quot; class=&quot;btn btn-danger&quot;&gt;Delete&lt;/a&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  @endforeach
  
                              &lt;/tbody&gt;
                              &lt;tfoot&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;ID&lt;/th&gt;
                                      &lt;th&gt;Image&lt;/th&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Slug&lt;/th&gt;
                                      &lt;th&gt;Status&lt;/th&gt;
                                      &lt;th&gt;Parent&lt;/th&gt;
                                      &lt;th&gt;Action&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/tfoot&gt;
                          &lt;/table&gt;
                          &lt;div&gt;
                              {!!$categories-&gt;links()!!}
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Table --&gt;
  
                  &lt;/div&gt;&lt;!-- body --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  </code></pre>
  <p>and The Component Main.php ,</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire\Admin\Category;
  
  use App\Models\Admin\Category;
  use Livewire\Component;
  use Livewire\WithPagination;
  
  class Main extends Component
  {
      use WithPagination;
  
      protected $categories;
      public $showCreateForm = false;
      public $showEditForm = false;
      public function render()
      {
          $categories = Category::orderBy('id','desc')-&gt;paginate(12);
          return view('livewire.admin.category.main',[
              'categories' =&gt; $categories,
          ]) -&gt;layout('layouts.admin');
      }
  
      public function createCategory()
      {
           $this-&gt;showCreateForm = !$this-&gt;showCreateForm;
      }
      public function update_Category($id)
      {
  
  
           $categories = Category::whereId($id);
           if ($categories) {
              $this-&gt;emit('getCategoryid' , $categories);
              $this-&gt;showEditForm = !$this-&gt;showEditForm;
              $this-&gt;showCreateForm = false;
           }
      }
      public function delete_Category($id)
      {
           $this-&gt;showCreateForm = !$this-&gt;showCreateForm;
      }
  }
  </code></pre>
  
  <ul>
  <li>//// <strong>Update</strong> ////</li>
  </ul>
  <p>i tried iRestWeb Answer, I think it the right answer but i dont even understand what happening its 100% javascript related and its not my field of expertise , so here's my full code i hope some one understand , and again sorry if my code messy and give you hard time , thank youu.</p>
  <p>create.blade.php
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data"&gt;
      @csrf
      &lt;div class="card-body"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Parent&lt;/label&gt;
              &lt;select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id"&gt;
                &lt;option selected value&gt; -- select an option -- &lt;/option&gt;
                {{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
                &lt;option value="{{$category-&gt;id}}"&gt;{{$category-&gt;name}}&lt;/option&gt;
                @endforeach {{-- @endif --}}
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 1 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputPassword1"&gt;Category Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"&gt; @error('name') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 2 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputPassword1"&gt;Slug Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"&gt; @error('slug') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 3 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleFormControlFile1"&gt;Image&lt;/label&gt;
              &lt;input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"&gt; @error('image') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- 4 --&gt;
        &lt;/div&gt;
        &lt;div class="form-check"&gt;
          &lt;input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active"&gt;
          &lt;label class="form-check-label" for="exampleCheck1"&gt;is Active&lt;/label&gt; @error('is_active') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.card-body --&gt;
      &lt;div class="card-footer"&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Create.php</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  namespace App\Http\Livewire\Admin\Category;
  
  use Livewire\Component;
  use App\Models\Admin\Category;
  use Livewire\WithFileUploads;
  use Illuminate\Support\Str;
  use Livewire\WithPagination;
  use Intervention\Image\Facades\Image;
  
  
  
  class Create extends Component
  {
  
  
  use WithFileUploads;
      use WithPagination;
  
      public $slug , $name , $image , $parent_id , $is_active;
  
      protected $rules = [
          'slug' =&gt; 'required|unique:categories,slug',
          'name' =&gt; 'required',
          'image'=&gt; 'nullable|image|max:1024'
      ];
  
      protected $categories;
      public function render()
      {
          $categories = Category::orderBy('id','desc')-&gt;paginate(12);
          return view('livewire.admin.category.create' , [
              'categories' =&gt; $categories,
          ]);
      }
      public function create()
      {
          $this-&gt;validate();
  
          $data = [
              'name' =&gt; $this-&gt;name,
              'slug' =&gt; $this-&gt;slug,
              'is_active'=&gt; $this-&gt;is_active,
              'image'=&gt; $this-&gt;image,
              'parent_id'=&gt; $this-&gt;parent_id,
          ];
          //image upload
              try {
                  if ($image = $this-&gt;image) {
                      $filename = Str::slug($this-&gt;name).'.'.$image-&gt;getClientOriginalExtension();
                      $path = public_path('assets/image/'.$filename);
                      Image::make($image-&gt;getRealPath())-&gt;save($path,100);
                  }
                  Category::create($data);
                  $this-&gt;reset();
                  return $this-&gt;addError('success' , 'Created Successfuly');
              } catch (\Throwable $th) {
                  return $this-&gt;addError('error', 'Something Wrong Happens');
              }
  
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  <p>edit.blade.php</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update"&gt;
      @csrf
      &lt;div class="card-body"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Parent&lt;/label&gt;
              &lt;select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id"&gt;
                &lt;option&gt;&lt;/option&gt;
                {{-- @if (is_array($categories) || is_object($categories) || !empty($categories)) --}} @foreach ($categories as $category)
                &lt;option value="{{$category-&gt;id}}"&gt;{{$category-&gt;name}}&lt;/option&gt;
                @endforeach {{-- @endif --}}
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 1 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputPassword1"&gt;Category Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='{{$category-&gt;name}}' name="name"&gt; @error('name') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 2 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputPassword1"&gt;Slug Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='{{$category-&gt;slug}}'&gt; @error('slug') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- 3 --&gt;
          &lt;div class="col-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleFormControlFile1"&gt;Image&lt;/label&gt;
              &lt;input type="file" class="form-control-file" id="exampleFormControlFile1" name="image"&gt;
              &lt;img value='{{$category-&gt;image}}' alt="" srcset=""&gt; @error('image') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- 4 --&gt;
        &lt;/div&gt;
        &lt;div class="form-check"&gt;
          &lt;input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active"&gt;
          &lt;label class="form-check-label" for="exampleCheck1"&gt;is Active&lt;/label&gt; @error('is_active') &lt;span class="error text-danger"&gt;{{ $message }}&lt;/span&gt; @enderror
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.card-body --&gt;
      &lt;div class="card-footer"&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Edit.php (uncompleted Task)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  namespace App\Http\Livewire\Admin\Category;
  
  use Livewire\Component;
  use App\Models\Admin\Category;
  
  class Edit extends Component
  {
      protected $categories , $cat_id;
      public $slug , $name , $image , $old_image , $parent_id , $is_active;
  
      protected $listeners = ['getCategoryid'=&gt;'getID'];
  
  
      public function mount()
      {
         $this-&gt;categories = Category::whereId($this-&gt;cat_id)-&gt;first();
      }//mout
  
  
      public function render()
      {
          $categories = Category::all();
          return view('livewire.admin.category.edit' , [
              'categories' =&gt; $categories,
          ]);
      }//render
  
      public function update($id)
      {
  
      }//update
  
      public function getID($categories)
      {
          $this-&gt;categories = $categories;
  
          // Data
          $this-&gt;slug = $this-&gt;$categories['slug'];
          $this-&gt;name = $this-&gt;$categories['name'];
          $this-&gt;image = $this-&gt;$categories['image'];
          $this-&gt;old_image = $this-&gt;$categories['old_image'];
          $this-&gt;parent_id = $this-&gt;$categories['parent_id'];
          $this-&gt;is_active = $this-&gt;$categories['is_active'];
  
      }//getID
  }</code></pre>
  </div>
  </div>
  </p>