Laravel Splade验证错误刷新后如何保留旧输入值？

要在Splade表单中实现验证错误或页面刷新后保留旧输入，你需要使用表单组件的remember属性，而不是在单个输入字段上添加old属性，具体操作如下：

1. 启用表单的本地存储记忆功能 #

直接在<x-splade-form>标签上添加remember属性，并指定一个唯一标识（比如表单用途的名称），Splade会自动将表单数据存储在浏览器本地存储中，页面刷新或验证失败后自动恢复：

<x-splade-form remember="user-registration-form">
    {{-- 文本输入框 --}}
    <input type="text" v-model="form.name" />
    <p>你的名字是: <span v-text="form.name" /></p>
 
    {{-- 复选框 --}}
    <input type="checkbox" v-model="form.newsletter" />
    <svg :class="{ 'text-green-500': form.newsletter, 'text-red-500': !form.newsletter }" />
 
    {{-- 条款同意复选框与提交按钮 --}}
    <input type="checkbox" v-model="form.agree_with_terms" />
    <button type="submit" v-show="form.agree_with_terms">提交</button>
</x-splade-form>

2. 配合后端验证填充旧输入 #

如果是后端验证失败返回页面，需要在控制器中把old()数据传递给表单的初始值，确保Splade能正确回显：

return view('your-form-view', [
    'form' => [
        'name' => old('name'),
        'newsletter' => old('newsletter', false),
        'agree_with_terms' => old('agree_with_terms', false),
    ]
]);

关键注意事项 #

• 不要在单个输入字段上使用old属性，Splade的v-model是与form对象绑定的，记忆功能由表单组件的remember属性统一管理。
• remember的标识要唯一，避免不同表单之间的数据互相干扰。
• 对于复选框这类布尔型字段，要设置默认值（比如false），否则旧输入为空时无法正确回显状态。

内容的提问来源于stack exchange，提问作者Abid Raheem