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

Question

设置: Laravel 8+惯性JS与Vue 3

我正在尝试用InertiaJS实现内联InertiaJS，就像这里描述的：https://inertiajs.com/forms#form-helper

但这不管用。像form.processing这样的所有form.processing都是可用的，但没有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调试工具

Answer 1

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

你可以：

( a)从这里或

( b)删除AppServiceProvider@boot下的所有内容，创建一个新的中间件，扩展惯性的中间件--这将成为共享所有附加道具(例如闪光灯)的地方。

<?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组。