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

Question

在我的 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 都会“重置”。

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

Answer 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>

Answer 2

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

const eventRef = reactive(props.event)