表单 Forms

未匹配的标注

提交表单

虽然可以使用 Inertia 进行传统表单提交,但不建议这样做,因为它们会导致整个页面重新加载。相反,最好拦截表单提交,然后使用 Inertia 发出请求。

Vue 3

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'

export default {
  setup () {
    const form = reactive({
      first_name: null,
      last_name: null,
      email: null,
    })

    function submit() {
      Inertia.post('/users', form)
    }

    return { form, submit }
  },
}
</script>

与经典的 ajax 提交表单不同,使用 Inertia 你无需在客户端处理提交后的行为。相反,您使用 redirect 在服务端执行此操作。而且,当然,没有什么可以组织您直接重定向回您所在的页面。

Laravel

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
          'users' => User::all(),
        ]);
    }

    public function store()
    {
        User::create(
            Request::validate([
                'first_name' => ['required', 'max:50'],
                'last_name' => ['required', 'max:50'],
                'email' => ['required', 'max:50', 'email'],
            ])
        );

        return Redirect::route('users.index');
    }
}

服务器端验证

在 Inertia 中处理服务器端验证错误的工作方式与经典的 ajax 驱动表单略有不同,您可以从 422 响应中捕获验证错误并手动更新表单的错误状态。这时因为 Inertia 从未收到 422 响应。相反,Inertia 的操作更像是标准的整页的表单提交。

有关详细信息,请参见 validation

表单助手

由于使用表单非常常见,因此 Inertia 随附了一个表单助手,旨在减少典型表单所需的样板文件量。它的使用方法如下:

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>

要提交表单,请使用 getpostputpatch 和 delete 方法。

Vue 2 / Vue 3

form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)

提交方法支持所有的常规方法 访问 options,如preserveStatepreserveScroll 和事件回调。这有助于对成功提交表单执行任务,例如重置输入。

Vue 2 / Vue 3

form.post('/profile', {
  preserveScroll: true,
  onSuccess: () => form.reset('password'),
})

如果您需要在表单数据提交前修改它,可以通过 transform() 方法实现。

Vue 2 / Vue 3

form
  .transform((data) => ({
    ...data,
    remember: data.remember ? 'on' : '',
  }))
  .post('/login')

您可以使用 processing 属性来追踪当前是否正在提交表单。通过禁用提交按钮,这有助于防止双重表单提交。

Vue 2 / Vue 3

<button type="submit" :disabled="form.processing">Submit</button>

在上传文件的事件中,当前进度事件可以通过 progress  属性获得。 这对于显示上传进度很有帮助。例如:

Vue 2 / Vue 3

<progress v-if="form.progress" :value="form.progress.percentage" max="100">
  {{ form.progress.percentage }}%
</progress>

在发生表单错误时,可以通过 errors 属性。

Vue 2 / Vue 3

<div v-if="form.errors.email">{{ form.errors.email }}</div>

要检查表单是否有错,请使用 hasErrors 属性。要清理表单错误,请使用 clearErrors() 方法。

Vue 2 / Vue 3

// Clear all errors
form.clearErrors()

// Clear errors for specific fields
form.clearErrors('field', 'anotherfield')

如果您正在使用客户端输入验证库或执行其他检查,您也可以通过使用 setErrors() 在表单中设置您自己的错误。

Vue 2 / Vue 3

// Set a single error
form.setError('field', 'Your error message.');

// Set multiple errors at once
form.setError({
  foo: 'Your error message for the foo field.',
  bar: 'Some other error for the bar field.'
});

与实际表单提交不同,在表单实例上手动设置错误时,页面的道具保持不变。

表单提交成功后,wasSuccessful 属性将变为 true。除此之外,还有一个 recentlySuccessful 属性,在成功表单提交后,该属性将被设置为两秒钟。这有助于显示临时成功信息。

将表单值重置回其默认值,可以使用 reset() 方法。

Vue 2 / Vue 3

// 重置表单
form.reset()

// 重置特殊字段
form.reset('field', 'anotherfield')

如果表单的默认值过时,可以使用 defaults() 方法更新他们。这样,下次使用 reset() 方法时,表单将重置为正确的值。

Vue 2 / Vue 3

// 将表单的当前值设置为新的默认值
form.defaults()

// 更新单个字段的默认值
form.defaults('email', 'updated-default@example.com')

// 更新多个字段的默认值
form.defaults({
  name: 'Updated Example',
  email: 'updated-default@example.com',
})

要取消表单提交,请使用 cancel() 方法。

Vue 2 / Vue 3

form.cancel()

在历史状态下自动 记住 表单帮助程序数据和错误,您可以在实例化表单时提供唯一的表单键作为第一个参数。

Vue 3

import { useForm } from '@inertiajs/inertia-vue3'

const form = useForm('CreateUser', data)
const form = useForm(`EditUser:${user.id}`, data)

要检查表单是否有任何更改,请使用 isDirty 属性。

Vue 2 / Vue 3

<div v-if="form.isDirty">There are unsaved form changes.</div>

文件上传

文件上载当访问包含文件时,Inertia 将自动将请求数据转换为 FormData 对象。

了解更多信息,请参见 文件上传

XHR/fetch 提价

使用 Inertia 提交表单在绝大多数情况下都非常有效。然而,如果您需要对表单提交进行更精细的控制,那么没有什么可以阻止您进行普通的 xhr 请求或 fetch 请求。在同一个应用程序中使用这两种方法完全可以!

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/fo...

译文地址:https://learnku.com/docs/inertia/0.11/fo...

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~