laravellaravel-livewirelaravel-10livewire-3

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.

Solution

  • I figured out there are 2 ways to do this.

    1. As @Pippo suggested in the comments:
    <button wire:click.prevent="$refresh">Refresh</button>
    1. Having the type property set to button:
    <button type="button" wire:click="$refresh">Refresh</button>