php - Laravel Livewire 电线 :submit. 防止无法按预期工作

Question

我有一个简单的表格:

<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

和 Livewire 组件:

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

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

以上所有代码都在 Livewire 2x 和 alpine 3x 上运行，@livewire 脚本包含在\layout\app.blade.php 中。

但出于某种原因，当我点击提交按钮时，它会重新加载页面并在 url 中附加一个“?comment=”。

我认为问题出在兑现的 View 上，所以我运行了 php artisan view:clear 和 php artisan optimize:clear，但这并没有帮助。我还清除了我的浏览器缓存，认为这会有所帮助，但没有成功。

有人可以启发这个问题的解决方案，或者指出我可能做错了什么。

提前致谢

Answer 1

关注此页面 https://laravel-livewire.com/docs/2.x/troubleshooting ，应该有一个根元素问题。

Livewire 要求在组件 Blade View 的根部只有一个 HTML 元素，这不是你的情况，你有一个 Form 和一个 P。

解决方案是确保只有一个根 HTML 元素，例如 .如果您有多个元素，请将所有元素包装在一个或另一个适合您布局的元素中。

你的代码应该是这样的:

<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>

希望对您有所帮助!