Laravel Livewire wire:submit.prevent not working as intended

Question

I have a simple form:

<form class="w-full" wire:submit.prevent="postComment">
     <textarea 
         type="text" 
         name="comment" 
         id="comment"
         wire:model.defer="newCommentState.body" 
         class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" 
         placeholder="Leave a comment!">
    </textarea>
    <button 
        type="submit" 
        class="justify-items-start btn rounded-full m-3">
        Comment
    </button>
</form>
@error('newCommentState.body')
    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
@enderror

and the Livewire Component:

public $newCommentState = [
    'body' => ''
];

public function postComment()
{
   dd($this->newCommentState);
}

All the above code is running on Livewire 2x and alpine 3x, and the @livewire scripts are included in the \layout\app.blade.php.

but for some reason when I click the submit button it reloads the page and appends a "?comment=" to the url.

I assumed the problem was the views being cashed so I ran php artisan view:clear and php artisan optimize:clear , yet that did not help. I also cleared my browser cache thinking that it would help but had no luck.

Can someone please enlighten on a solution to this problem, or point out what I might be doing wrong.

Thanks In Advance

Answer 1

Following this page https://laravel-livewire.com/docs/2.x/troubleshooting , there should be a root element issues .

Livewire requires that there be only one HTML element at the root of a components blade view, that's not your case, you have a Form and a P.

The solution is to ensure that you only have one root HTML element, such as a. If you have multiple elements, then wrap everything in a or another element that suits your layout.

Your code should be like this:

 <div> <form class="w-full" wire:submit.prevent="postComment"> <textarea type="text" name="comment" id="comment" wire:model.defer="newCommentState.body" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" placeholder="Leave a comment."> </textarea> <button type="submit" class="justify-items-start btn rounded-full m-3"> Comment </button> </form> @error('newCommentState.body') <p class="mt-2 text-sm text-red-500">{{ $message }}</p> @enderror </div>

Hope this help!

Answer 2

maybe you forgot to put @livewireScripts at the end before closing body tag