如何使用 Formhelper 在 InertiaJS 中进行表单验证

Question

设置：Laravel 8 + Vue 3 的惯性 JS

我正在尝试使用 InertiaJS 实现内联 form.errors，如下所述：https://inertiajs.com/forms#form-helper

但这不起作用。 form.processing 等 form-helpers 都可用，但 form.errors.

不可用

首先，我通过 boot() 在 AppServiceProvider.php

中分享来自 Laravel 的错误

AppServiceProvider.php

public function boot()
    {
        Inertia::share([
            'errors' => function () {
                return Session::get('errors')
                    ? Session::get('errors')->getBag('default')->getMessages()
                    : (object) [];
            },
        ]);

        Inertia::share('flash', function () {
            return [
                'message' => Session::get('message'),
            ];
        });
    }

其次，我使用 InertiaJS 表单助手设置了 Vue 文件。如果我写的不是“form.errors.asin" -> "$attrs.errors.asin”，就会显示错误，但不会显示在表单对象中，我不知道为什么会这样。

Index.vue

<template>
  <main>
    <form @submit.prevent="submit">
        <div v-if="form.errors.asin">{{ form.errors.asin }}</div>
        <input id="asin" v-model="form.asin" label="ASIN:" />
        <button disabled="form.processing" type="submit"> Translate </button>
    </form>
  </main>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";

export default {
  setup() {
    const form = useForm({
      asin: null,
    });

    return { form };
  },
  methods: {
    submit() {
      this.form.get(
        "/translation/translate",
      );
    },
  },
};
</script>

HandleInertiaRequests.php

public function share(Request $request)
    {
        // In parent::share the error $attrs are shared
        return array_merge(parent::share($request), [
            'appName' => config('app.name'),
            'auth' => [
                'user' => $request->user()->only('id', 'email', 'is_admin', 'name'),
            ],
            'flash' => [
                'message' => function () use ($request) {
                    return [
                        'success' => $request->session()->get('success'),
                        'error' => $request->session()->get('error'),
                    ];
                }
            ],
        ]);
    }

如图所示，错误设置在$attrs.errors.asin下，但在form.errors

下没有

Vue Debug Tools

Answer 1

惯性的前端部分对错误有不同的期望。

你可以：

a) 从 here 或

中获取您需要的确切部分

b) 删除 AppServiceProvider@boot 下的所有内容并创建一个新的中间件来扩展 Inertia 的中间件 - 这将作为共享所有其他道具（例如 flash 道具）的地方。

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';

    public function version(Request $request)
    {
        return parent::version($request);
    }

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            //
        ]);
    }
}

中间件需要在app/Http/Kernel.php内的web组上应用。

如何使用 Formhelper 在 InertiaJS 中进行表单验证

How to make form validation in InertiaJS with Formhelper

inertiajs

laravel

laravel-8