laravel-8 - 显示错误后应保留表单数据

Question

我是惯性 js 的新手，并使用 Laravel 和惯性 js 创建项目，我面临一个问题，即在任何错误显示后表单数据都会被删除。如何防止惯性。

我已经尝试过preserveState。

Vue代码：

    <template>
    <template #breadcrumb>
        <div>
            <div>
            <button @click="submit">Save</button>
            </div>
        </div>
    </template>
    <div>
        <div>
            <label>Name</label>
            <t-input type="text" v-model="form.name" />
            <div v-if="errors['name']">{{ errors["name"] }}</div>
        </div>
        <div>
            <label>Comment</label>
            <t-input type="text" v-model="form.comment" />
            <div v-if="errors['comment']">{{ errors["comment"] }}</div>
        </div>
    </div>
</template>
<script>
    import { Inertia } from '@inertiajs/inertia'
    
    export default {
    components: {
        Inertia
    },
    props: {
        form: Object,
        errors: Object,
    },
    methods: {
        submit() {
        Inertia.post(this.route("post.store"), this.form, { preserveState: true });
        },
    },
    };
</script>

控制器代码

public function store(Request $request)
{
    $request->validate([
        'name' => ['required', 'string'],
        'comment' => ['required', 'string'],
    ]);

    $data = [
        'name' => $request->get('name'),
        'comment' => $request->get('comment'),
    ];
     Post::create($data);

    return redirect(route('post'))->with('success', 'Post created.');
}

标签： laravel-8inertiajs

Answer 1

尝试在表单道具上的 Vue 组件绑定中使用表单助手（在此处阅读https://inertiajs.com/forms），而不是传递给 vue 的道具：

<template>
    <template #breadcrumb>
        <div>
            <div>
            <button @click="submit">Save</button>
            </div>
        </div>
    </template>
    <div>
        <div>
            <label>Name</label>
            <t-input type="text" v-model="myForm.name" />
            <div v-if="myForm.error('name')">{{ myForm.error('name') }}</div>
        </div>
        <div>
            <label>Comment</label>
            <t-input type="text" v-model="myForm.comment" />
            <div v-if="myForm.error('comment')">{{ myForm.error('comment') }}</div>
        </div>
    </div>
</template>
<script>
    import { Inertia } from '@inertiajs/inertia'
    
    export default {
    components: {
        Inertia
    },
    props: {
        form: Object,
        errors: Object,
    },
    data() {
        return {
            myForm: Inertia.form(
            {          
              name: this.form.name,
              comment: this.form.comment,
            },
        }
    },
    methods: {
        submit() {
        this.myForm.post(this.route("post.store"));
        },
    },
    };
</script>