Livewire emit isn’t triggered

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 LivewireComponent;

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try adding a livewire event on your main blade file:

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x