wire:click not working in if passed button in slot to layout

Hello friends Thanks for help, wire:click not working in if pass button in slot to layout - but work if i moved out of slot

projects.blade.php // livewire component

<div>
    <x-slot name="searchInput">
        <x-inputs.search />
    </x-slot>
    <x-slot name="createBtn">
// NOT WORKING  event not working
        <x-buttons.create name="Create Project" wire:click.prevent="changeValue('from create')" />
    </x-slot>
// EVENT WORKING 100%
        <x-buttons.create name="Create Project" wire:click.prevent="changeValue('from create')" />
</div>

Project.php

    public $filter = '';

    public function changeValue($value)
    {
        dd('touched');
        $this->filter = $value;
    }

layout.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zain:wght@300;400;700&display=swap" rel="stylesheet">
    <title>{{ $title ?? 'Pro Manager' }}</title>
    @livewireStyles
    @vite(['resources/js/app.js', 'resources/css/app.css'])

</head>

<body class="bg-slate-50">
    <div class="dashboard-container">
        <div class="navbar px-4 bg-white flex items-center justify-between border">
                {{ $searchInput }}
            <div>
                {{ $createBtn }}
            </div>
        </div>
        <div class="content border bg-slate-50 p-4">
            {{ $slot }}
        </div>
        <x-sidebar.sidebar />
        <x-sidebar.sidebar-right />
    </div>
    @livewireScripts
</body>

</html>

FabioPacifici

1 year ago

Level 12

🤔Here for the same issue, apparently this is due to the component isolation that prevents the event propagation when the wire:click is inside the slot. In my case the slot isn't really necessary so i worked around the issue by moving the button outside the slot and removed it.

However, it would be interesting to find out what's actually wrong and how to make it work.

1 like

Respect

1 year ago

Level 3

@FabioPacifici First Thanks for answer - yeah i found this error happen with others too , changed wire:click to $dispatch but does not working too like this url https://github.com/livewire/livewire/issues/2322

Please or to participate in this conversation.