Button not emitting event

I'm struggling to use the wire:click directive in my laravel project. Other Livewire component are rendered correctly and they all works. But this button (inside div with id=fire-button) that should fire an event, isn't working. I don't receive any error whatsoever. The same directive wire:click is working out of the box into a livewire modal in the same page. If i switch wire:click($emit...) with Livewire.emit , the button emit the event correctly. I'm really confused. I've also tried to wrap the button with a div like someone said in others topics but with no luck.

Here's the app.blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/css/crm.css', 'resources/css/inputs.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
    </head>
    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main class="p-10">
                {{ $slot }}
            </main>
        </div>
        @livewireScripts
    </body>
</html>

Here's the child blade (list.blade) using the app.blade (here the button does not fire anything)

<x-app-layout>
    <!-- x-app-layout cerca una classe in view/Component/AppLayout -->
    <!-- viewComponent/Slot è di sistema e non si trova nei component dell'applicazione -->
    <x-slot name="header">
        <h2 class="font-semibold text-xl crm-head-text-color leading-tight">
            {{__('crm.lista_utenti')}}
        </h2>
    </x-slot>

    @livewire('user-table')
    <div id="fire-button">
        <button wire:click.prevent="$emit('showModal','Gianni')" class="float-bottom-right fab fab-transition button-accent-color">
    <!--<button onclick="Livewire.emit('showModal','Gianni')" class="float-bottom-right fab fab-transition button-accent-color">-->
        <svg viewBox="0 0 22 22" class="w-6 h-6 inline-block">
            <path d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
                                    C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
                                    C15.952,9,16,9.447,16,10z" />
        </svg>
        <span>{{__('crm.nuovo')}}</span>
    </button>
    </div>

</x-app-layout>
@livewire('modals.activate-user-modal',['data'=>''])

this is took from the modals/activate-user-modal-blade (here the wire:click directive works)

                <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                    <button wire:click.prevent="doClose()" type="button" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Deactivate</button>
                    <button wire:click.prevent="doClose()" type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
                </div>

webrobert

3 years ago

Level 51

This is in a loop?

<div id="fire-button"> are you defining id more than once? have you tried removing the id?

Also I think .prevent is redundant here as its not a href link.

1 like

viappio

3 years ago

Level 1

@webrobert yeah no need for prevent, but i tried with or without it and makes no differences. The button is a laravel view not looping anything.

Snapey

3 years ago

Best Answer

Level 122

wire:click will only work with a component view file. Is this the case?

1 like

viappio

3 years ago

Level 1

@Snapey the wire:click that is not working is in a regular blade, not in a livewire component. But i saw many code snippet and tutorials that showcases the use of wire:click in a regular laravel view.

Please or to participate in this conversation.