javascript - 从 laravel 到 vue.js 验证后如何显示数组响应的错误(基于索引)

Question

我正在尝试根据我在 laravel api 中的响应以正确的顺序(基于索引)显示错误。

vue 上显示的错误使用 {{ errors }} :

{ "options.cart.0.request": [ "options.cart.0.request es 无效。"], "options.cart.3.request": [ "options.cart.3.request 无效。"] }

调用 api 的函数 - 我得到的响应状态代码是 422:

        async doOrder () {
            axios.post('api/order', this.user).then( response => {
                this.$store.dispatch('auth/updateUser', { user : response.data })
            }).catch(error => {
                if (error.response.status === 404) {
                    this.$router.push('/404');
                }
                if (error.response.status === 422 ) {
                    this.errors = error.response.data.errors
                }
            });

Laravel 验证:

    public function store(Request $request)
    {
        $input = $this->validate( $request, [
            'options.cart' => 'required|array',
            'options.cart.*.code' => 'required|exists:products,code',
            'options.cart.*.request' => 'required|in:1,2',
        ]);

        return $request; //Testing

    }

Vue v-for :

        <section id="request" v-if="user.options.cart.length > 0">
            <div class="card-body" v-for="(object , index) in user.options.cart" :key="object.product_id">
                <div class="col-6 col-sm-6 col-md-8 text-md-right form-group" style="padding-top: 5px">
                    <select class="custom-select my-1 mr-sm-2" :class="errors ? 'is-invalid' : ''" name="request" required v-model="object.request">
                        <option value="1" :selected="object.request == 1 ">Amostras</option>
                        <option value="2" :selected="object.request == 2 ">Informações / Cotação</option>
                    </select>
                    <div class="invalid-feedback" v-if="errors.errors">Example invalid custom select feedback</div>
                </div>
            </div>
        </section>

Answer 1

你需要像这样使用验证器外观

    $validator = \Validator::make(request()->all(), [
        'options.cart' => 'required|array',
        'options.cart.*.code' => 'required|exists:products,code',
        'options.cart.*.request' => 'required|in:1,2',
    ]);

if($validator->fails()){
    return response()->json(['status' => false, 'data' => $validator->errors()]);
}