[英]Laravel Livewire wire:submit.prevent not working as intended
我有一個簡單的表格:
<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 中。
但出於某種原因,當我單擊提交按鈕時,它會重新加載頁面並將“?comment=”附加到 url。
我認為問題是兌現的觀點,所以我運行了php artisan view:clear
和php artisan optimize:clear
,但這並沒有幫助。 我還清除了我的瀏覽器緩存,認為這會有所幫助,但沒有成功。
有人可以啟發這個問題的解決方案,或者指出我可能做錯了什么。
Thanks In Advance
按照此頁面https://laravel-livewire.com/docs/2.x/troubleshooting ,應該有根元素問題。
Livewire 要求在組件刀片視圖的根部只有一個 HTML 元素,這不是你的情況,你有一個 Form 和一個 P。
解決方法是確保你只有一個根 HTML 元素,比如 a. 如果您有多個元素,請將所有內容包裝在一個或另一個適合您布局的元素中。
你的代碼應該是這樣的:
<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>
希望這有幫助!
也許你忘了在關閉 body 標簽之前把@livewireScripts
放在最后
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.