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

Posted 2023-02-16

【中文标题】InertiaJS 在验证错误后保留表单数据

【英文标题】：InertiaJS keep form data after validation error

【发布时间】：2021-10-13 00:45:33

【问题描述】：

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

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

这就是事件 obj 在后端的样子：

['name' => 'Event Name']

我使用toRefs 来转换响应式道具并在 UI 中更新其属性：

const eventRef = toRefs(props).event

因此，当组件加载时，事件的名称为“事件名称”，当我将 UI 中的事件名称更新为“新名称”并提交表单时，我在请求中发送 eventRef obj 以创建新活动：

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

如果后端出现验证错误，我会将其返回到前端并在 UI 中显示错误（这可以正常工作）。我遇到的问题是 Inertia（或者可能是 VueJS）在创建组件时将对象 eventRef 返回到他以前的状态。这意味着 eventRef 的 name 属性再次更改为“事件名称”，而不是保留在 UI 中更新的“新名称”。我想在提交表单后保留对象的状态。这是我的惯性响应：

component: "Events/EventNew"
props: 
  global:  // Global object

url: "/app/qa/events/new"
version: null

如您所见，我什至没有从后端获取“事件”道具，因此不应对其进行更新。在阅读了 Inertia 文档后，我认为请求选项中的简单 preserveState:true 可以完成这项工作，但这并没有发生。每次服务器返回 Inertia 响应时，eventRef obj 都会“重置”。

我在这里缺少什么？我会很感激一些帮助

【参考方案1】：

我相信我在使用 Inertia 和 Vue2 时遇到了同样的问题。如果我理解正确，您可能会在尝试更新和输入的表单上看到这一点，对吧？您的验证正在运行，但表单不断将自身重置为之前的状态。如果是这样的话，为我解决这个问题的是：

不要直接使用Inertia.post()，而是使用Inertia Form Helper

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>

【讨论】：

感谢您的回答。我发现了问题。在发送请求后，toRefs 正在更新 prop event。我将代码更新为一个简单的反应对象，问题就消失了。

【参考方案2】：

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

const eventRef = reactive(props.event)