I'm trying to show a modal when I click the edit button, so I added wire:click :

    <td class="py-3 px-6 text-left">
        <div class="flex items-center">
            <span class="font-medium">{{ $project->project }}</span>
        </div>
    </td>

    <td class="py-3 px-6 text-left">
        <div class="flex items-center">
            <span>{{ $project->username }}</span>
        </div>
    </td>
    
    <td class="py-3 px-6 text-center">
        <span class="bg-{{ $project->status_color }}-200 text-{{ $project->status_color }}-600 py-1 px-3 rounded-full text-xs"> {{ $project->status_name }} </span>
    </td>

    <td class="py-3 px-6 text-center">
        <div class="flex item-center justify-center">

        <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-4 rounded" wire:click="edit">
          edit
        </button>

        </div>
    </td>
</tr>

And here's my component:

use Livewire\Component;

class Dashboard extends Component {
    use WithPagination;

    public function edit() {
        $this->emit('eModal');
    }
}

And inside the livewire blade, where the button is, I added the modal and the script for the button:

<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')

<script>
   Livewire.on('eModal', () =>{
     console.log('scsa');
  $('#editModal').modal('show');
});
</script>

@endpush

I added the console.log to the script, so I can see if the emit is triggered, but nothing happens, I get nothing on my console. I tried dispatchBrowserEvent, but same result; nothing is happening.

Can someone help me? Thank you!

CodePudding user response：

Try adding a livewire event on your main blade file:

    <script>
    Livewire.on('eModal', () =>{
      console.log('scsa');
      $('#editModal').modal('show');
    });
   </script>