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

Question

设置：Laravel 8+Inertia JS与Vue 3

我正在尝试用InertiaJS实现内联表单错误，如下所述：https://inertiajs.com/forms#form-辅助

但这行不通。所有类似form-helpers的表单处理都可用，但没有表单错误。

首先，我在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文件。如果我写的不是"；CCD_ 3"；错误将被显示，但不在窗体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下设置的，但不是在窗体下设置的。错误

Vue调试工具

Answer 1

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

你可以：

a( 从这里或获取您需要的确切零件

b( 删除AppServiceProvider@boot下的所有内容，并创建一个新的中间件来扩展Inertia的中间件——这将成为共享所有附加道具(例如flash道具(的地方。

<?php
namespace AppHttpMiddleware;
use IlluminateHttpRequest;
use InertiaMiddleware;
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组上。