Is it possible to nest a Livewire 3 component independently inside of a form?

I've got a long-running Laravel app with a traditional form in a blade view. Inside of this form I want to start to include a couple Livewire components that can refresh and submit data independent of the form. Is this possible?

For testing purposes I've created this simple component and nested it within the existing <form> on the page..

<div>
    Time: {{ time() }}
    <button wire:click="$refresh">Refresh</button>
</div>

But, clicking the button doesn't refresh the component, and instead submits the form.

bobclewell

2 years ago

Level 1

The answer, for those interested. There are 2 ways to do this:

Using .prevent on the click listener...

<button wire:click.prevent="$refresh">Refresh</button>

Explicitly defining the type of the button to be button...

<button type="button" wire:click="$refresh">Refresh</button>

1 like

Please or to participate in this conversation.