把动态界面，
写回 PHP。

官方示例组件全文

把下面这份代码放进 resources/views/pages/post/⚡create.blade.php，就是官方演示用的文章表单。注意它刻意没有样式，重点是状态、校验和提交；以下代码只作说明，不会在 Astro 页面运行。

<?php

use Livewire\Component;

new class extends Component
{
    public string $title = '';

    public string $content = '';

    public function save()
    {
        $this->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        dd($this->title, $this->content);
    }
};
?>

<form wire:submit="save">
    <label>
        Title
        <input type="text" wire:model="title">
        @error('title') <span>@{{ $message }}</span> @enderror
    </label>

    <label>
        Content
        <textarea wire:model="content" rows="5"></textarea>
        @error('content') <span>@{{ $message }}</span> @enderror
    </label>

    <button type="submit">Save Post</button>
</form>

生产环境一般怎么写

演示用 dd() 停下来看数据，真实项目通常是写入数据库再跳转。

public function save()
{
    $validated = $this->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);

    Post::create($validated);

    return $this->redirect('/posts');
}

提交状态也属于 Livewire 模板

在真实 Livewire 表单中，可以用加载指令禁用按钮、切换文案并播报进度；本页静态演示使用原生 JavaScript 实现相同状态。

<button type="submit"
    wire:loading.attr="disabled"
    wire:target="publish">
    <span wire:loading.remove wire:target="publish">发布文章</span>
    <span wire:loading wire:target="publish">正在发布…</span>
</button>

动手验证两次

1. 在真实 Livewire 应用中空表单直接提交，应该在两个字段下方看到服务端返回的错误，而且页面没有刷新。

2. 填好标题和内容再提交，应该能看到提交成功后的数据回显；在本页则使用浏览器本地校验与当前页面预览。