Form data should remain after displaying error - laravel-8

Question

I am new to inertia js and creating a project using Laravel and inertia js, I am facing an issue that form data is erased after any error display. How to prevent that in inertia.
I have already tried preserveState.
Vue code:
<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>
Controller code
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.');
}

Answer 1

Try using the form helper (read up on it here https://inertiajs.com/forms) something like this in your Vue component binding on the form props, not the prop you pass into the 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>