Laravel Jetstream 惯性错误处理问题答案

【问题标题】：Laravel Jetsream Interia Error Handling IssuesLaravel Jetstream 惯性错误处理问题
【发布时间】：2021-06-30 20:43:15
【问题描述】：

我只是带着 Jetstream/Interia 兜风，想结账。因此，我创建了一个包含 2 个输入字段的表单。

开始日期
结束日期

我有一条通过 GET 请求接收此信息并尝试验证它的路线。像这样

web.php

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids', [\App\Http\Controllers\AsteroidController::class, 'index'])->name('asteroids.index');

Route::middleware(['auth:sanctum', 'verified'])->get('/asteroids/process', [\App\Http\Controllers\AsteroidController::class, 'process'])->name('asteroids.process');


<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Http\Requests\AsteriodDateRequest;

class AsteroidController extends Controller
{
    public function index()
    {
        return Inertia::render('Asteroids/Index');
    }

    public function process(AsteriodDateRequest $request)
    {
        //
    }
}

AsteriodDateRequest
    public function rules()
    {
        return [
            'start_date' => ['required', 'date'],
            'end_date' => ['required', 'date'],
        ];
    }

我面临的问题是我无法显示任何验证错误消息。下面是我的代码Vue代码

<jet-form-section @submitted="submitDates">
    <template #title>
        Update Password
    </template>

    <template #description>
        Ensure your account is using a long, random password to stay secure.
    </template>

    <template #form>
        <div class="col-span-6 sm:col-span-4">
            <jet-label for="start_date" value="Start Date" />
            <jet-input id="start_date" type="date" class="mt-1 block w-full" v-model="form.start_date" ref="start_date" autocomplete="start_date" />
            <jet-input-error :message="form.errors.start_date" class="mt-2" />
        </div>
        <div class="col-span-6 sm:col-span-4">
            <jet-label for="end_date" value="End Date" />
            <jet-input id="end_date" type="date" class="mt-1 block w-full" v-model="form.end_date" ref="end_date" autocomplete="end_date" />
            <jet-input-error :message="form.errors.end_date" class="mt-2" />
        </div>


    </template>

    <template #actions>
        <jet-action-message :on="form.recentlySuccessful" class="mr-3">
            Saved.
        </jet-action-message>

        <jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Save
        </jet-button>
    </template>
</jet-form-section>

<script>
import JetActionMessage from '@/Jetstream/ActionMessage'
import JetButton from '@/Jetstream/Button'
import JetFormSection from '@/Jetstream/FormSection'
import JetInput from '@/Jetstream/Input'
import JetInputError from '@/Jetstream/InputError'
import JetLabel from '@/Jetstream/Label'

export default {
    components: {
        JetActionMessage,
        JetButton,
        JetFormSection,
        JetInput,
        JetInputError,
        JetLabel,
    },

    data() {
        return {
            form: this.$inertia.form({
                start_date: '',
                end_date: '',
            }),
        }
    },
    methods: {
        submitDates() {
            this.form.get(route('asteroids.process'), {
                errorBag: 'submitDates',
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
                
            })
        },
    },
}
</script>

here is the [![Screenshot][1]][1] of the response. Please let me know what I am doing wrong here.


  [1]: https://i.stack.imgur.com/diaf4.png

【问题讨论】：

标签： laravel vue.js jetstream

【解决方案1】：

我不是 Inertia 方面的专家，但您的 form.errors 对象似乎是空的（请参见屏幕截图的顶部）。惯性文档说它是 only errors.* 而不是 form.errors.* ，所以也许尝试替换相关行。否则，我相信有一个 onError: errors => {} 回调，您可以在其中填充 form.errors.* 对象。

        submitDates() {
            this.form.get(route('asteroids.process'), {
                errorBag: 'submitDates',
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
                onError: errors => { this.form.errors = errors; }, // maybe something like this works?
            })
        },

【讨论】：