Cannot get function to be called with wire:click in Volt

Hi, I'm trying to implement the bundled model component that comes with Livewire Breeze using the functional Volt and Blade API. I can't seem to figure out why my wire:click="toggleModal" call won't actually run. It just doesn't call the function. I've tried it with logging statements.

I'm using VS Code so I don't get much intellisense in Volt Blade files, and I can't seem to find any answers googling or asking AI in the past hour. Any help would be greatly appreciated.

<?php
use function Livewire\Volt\{layout, state};

layout('layouts.app');


state([
    'toggle' => false,
]);

$toggleModal = function () {
    $this->toggle = !$this->toggle;
    Log::info('Toggle Modal Triggered', ['toggle' => $this->toggle]);
};


?>
<div>
    <x-slot name="header">
        <div class="flex flex-1 flex-row">
            <div class="self-start">
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                    {{ __('Dashboard') }}
                </h2>
            </div>
            <div class="ml-auto" wire:click="toggleModal">
                <x-primary-button id="create-post" >Create Post</x-primary-button>
            </div>
        </div>

    </x-slot>


    <x-modal id="post-modal" name="post-modal" :show="$toggle">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <livewire:posts.create />
                </div>
            </div>
        </div>
    </x-modal>


    <div class="">
        <div class="max-w-7xl mx-auto container">
            <livewire:posts.list :limit="5" />
        </div>
    </div>

</div>

Nakov

1 year ago

Level 73

And what does your browser console says? So just open the browser's developer tools by inspecting the page and open the Console tab, there are probably some errors there.

Trying the simplest Volt component like this:

<?php

use function Livewire\Volt\{state};

state(['count' => 0]);

$increment = fn () => $this->count++;

?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

should work fine.

atalocke

1 year ago

Level 1

No errors. I think the issue is because my button and modal are in two different slots of the layout component, and despite trying with alpine or blade, it won't work. I tried to get @teleport working correctly too, but there I failed as well.

atalocke

1 year ago

Level 1

I'm trying with an event now, but this doesn't seem to work either.

<?php
use function Livewire\Volt\{layout, state, on};
layout('layouts.app');

state([
    'show' => false,
]);

$toggle = fn() => $this->show = !$this->show;


on([
    'toggle-clicked' => fn() => Log::debug("toggle-clicked recieved"),
]);



?>
<div id="view">
    <x-slot name="header">
            <div class="flex">
                <div>
                    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                        {{ __('Dashboard') }}
                    </h2>
                </div>
                <div class="ml-auto">
                    <x-primary-button wire:click="$dispatch('toggle-clicked')">{{ __('Create Post') }}</x-primary-button>
                </div>
            </div>
    </x-slot>

    <x-modal name="create-post-modal" :show="$show">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900 dark:text-gray-100">
                        <livewire:posts.create />
                    </div>
                </div>
            </div>
    </x-modal>

    <div class="">
        <div class="max-w-7xl mx-auto container">
            <livewire:posts.list />
        </div>
    </div>
</div>

Please or to participate in this conversation.