当我使用 Laravel、Livewire 和 AlpineJS 发送评论时出错

问：

我有一个无法解决的问题。 我用 Laravel 10、livewire 3、AlpineJS 3 做了一个博客。

我会向你展示我的代码。

组件 livewire：

<?php

namespace App\Livewire;

use App\Models\Post;
use App\Models\Comment;
use Livewire\Component;

class CommentCreate extends Component
{
    public string $content = '', $email = '', $nickname = '';

    public Post $post;

    public bool $creating = false;

    public function mount(Post $post, bool $creating = false, $parentComment = null)
    {
        $this->post = $post;

        $this->creating = $creating;
    }

    public function render()
    {
        return view('livewire.comment-create');
    }

    private function resetInputFields()
    {
        $this->content = '';
        $this->email = '';
        $this->nickname = '';
    }

    public function createComment()
    {
        $comment = Comment::create([
            'content' => $this->content,
            'posts_id' => $this->post->id,
            'parent_id' => $this->parentComment?->id,
            'email' => $this->email,
            'nickname' => $this->nickname,
        ]);

        $this->resetInputFields();

        $this->dispatch('commentCreated', $comment->id);
    }
}

查看直播：

<div class="mb-5">
    <div x-data="{
        focused: {{ $creating ? 'true' : 'false' }},
        init() {
            $wire.on('commentCreated'), () => {
                this.focused = false;
            }
        }
    }">
        <button @click="focused = true" type="button" class="btn btn-info">
            Add comment
        </button>
        <div class="mt-5" :class="focused ? '' : 'd-none'">
            <input wire:model.live="nickname" class="form-control bg-white" type="text"
                placeholder="Pseudo" aria-label="Text input with dropdown button">
            <input wire:model.live="email" class="form-control bg-white mt-4" 
                type="email" placeholder="Email"
                aria-label="Text input with dropdown button">
            <textarea wire:model.live="content" class="form-control bg-white mt-4" 
                rows="10"
                placeholder="Mettre un commentaire ici ..." aria-label="Text input with 
                dropdown button">
            </textarea>
            <div>
                <button wire:click='createComment' class="btn btn-primary mt-4" 
                    type="Submit">
                    <span class="text-white fw-semi-bold">Envoyer Commentaire</span>
                </button>
                <button @click="focused = false; isEdit = false; 
                    $wire.dispatch('cancelEditing')" type=button
                    class="btn btn-info mt-4">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

在浏览器的控制台中，每次尝试单击添加帖子中的发送时，我都会遇到多个错误。而且表单不会折叠，因为每次有人发送评论时我都想要这个。

添加评论和帖子的 CRUD 的视图

浏览器中的错误视图

我不知道该尝试什么了。

你能帮我吗？

再见