InertiaJS在验证错误后保留表单数据

Question

在我的InertiaJS/VueJS项目中，我有一个从后端接收一些数据的道具:

event: {
type:    Object,
default: () => { return {} }
},

事件对象在后端是这样的:

['name' => 'Event Name']

我使用toRefs来转换反应性道具并更新其在UI中的属性:

const eventRef = toRefs(props).event

因此，当组件加载时，事件名称为'Event name '，当我在UI中将事件名称更新为'New name '并提交表单时，我在请求中发送eventRefobj来创建新事件:

Inertia.post(url, eventRef, only: ['global'])

如果后端有验证错误，我将其返回到前端并在UI中显示错误(这是正常工作的)。问题是，我有惯性(或也许VueJS)是返回对象eventRef到他以前的状态，当组件被创建。这意味着eventRef的name属性再次更改为"事件名称"，而不是保留在UI中更新的"新名称"。我想在提交表单后保留对象的状态。这是我的惯性响应:

component: "Events/EventNew"
props: {
global: {} // Global object
}
url: "/app/qa/events/new"
version: null

正如你所看到的，我甚至没有从后端获得'event'道具，所以它不应该被更新。阅读惯性文档后，我认为一个简单的preserveState:true在请求选项会做的工作，但这并没有发生。每次服务器返回一个惯性响应，eventRef对象就被"重置"。

我在这里错过了什么?如果你能帮助我，我会很感激的。

Answer 1

我相信我在使用Vue2时遇到了同样的问题。如果我没理解错的话，你可能在试图更新和输入的表单上看到过这个，对吧?您的验证正在工作，但表单一直将自己重置为以前的状态。如果是这样的话，解决这个问题的方法是:

不要直接使用Inertia.post()，请使用惯性表单辅助器而不是

Vue 2

<template>
<form @submit.prevent="form.post('/login')">
<!-- email -->
<input type="text" v-model="form.email">
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<!-- password -->
<input type="password" v-model="form.password">
<div v-if="form.errors.password">{{ form.errors.password }}</div>
<!-- remember me -->
<input type="checkbox" v-model="form.remember"> Remember Me
<!-- submit -->
<button type="submit" :disabled="form.processing">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
form: this.$inertia.form({
email: null,
password: null,
remember: false,
}),
}
},
}
</script>

Vue 3

<template>
<form @submit.prevent="form.post('/login')">
<!-- email -->
<input type="text" v-model="form.email">
<div v-if="form.errors.email">{{ form.errors.email }}</div>
<!-- password -->
<input type="password" v-model="form.password">
<div v-if="form.errors.password">{{ form.errors.password }}</div>
<!-- remember me -->
<input type="checkbox" v-model="form.remember"> Remember Me
<!-- submit -->
<button type="submit" :disabled="form.processing">Login</button>
</form>
</template>
<script>
import { useForm } from '@inertiajs/inertia-vue3'
export default {
setup () {
const form = useForm({
email: null,
password: null,
remember: false,
})
return { form }
},
}
</script>

Answer 2

我解决了这个问题，是toRefs在发送请求后修改了组件中的props。使用reactive对象是解决方案:

const eventRef = reactive(props.event)