如何使用 Formhelper 在 InertiaJS 中進行表單驗證

Question

設置：Laravel 8 + 帶有 Vue 3 的慣性 JS

我正在嘗試使用 InertiaJS 實現內聯 form.errors，如下所示： https://inertiajs.com/forms#form-helper

但這不起作用。 像 form.processing 這樣的所有form-helpers都可用，但 form.errors 不可用。

首先，我通過 AppServiceProvider.php 中的boot()分享來自 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 ”，則會顯示錯誤，但不會在 form-Object 中顯示，我不知道為什么會這樣。

索引.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下的所有內容並創建一個擴展 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 組上。