根本没有设置 Vue vee-validate 服务器端错误

Question

我有以下表格：

<ValidationObserver ref="form" v-slot="{ handleSubmit }">
                    <form name="side-category" class="mb-4 md:flex md:flex-wrap md:justify-between" @submit.prevent="handleSubmit(onSubmit)">
                        <div class="md:w-full px-3">
                            <ValidationProvider name="Side" rules="required" v-slot="{ errors, failedRules }">
                                <label for="name" class="tracking-wide mb-2 uppercase font-bold text-xs text-grey-darkest">Side Category Name</label>
                                <input
                                        type="text"
                                        name="name"
                                        id="name"
                                        v-model.lazy="form.name"
                                        data-vv-as="beware asshole!!!"
                                        class="w-full border border-gray-200 rounded py-3 px-4 mb-3 bg-gray-200 text-blue-900 md:mr-2"
                                >
<!--                                <span v-if="failedRules.required">Yo! Save something!!!</span>-->
                                <span>{{ errors[0] }}</span>
                            </ValidationProvider>
                            <button id="submit-btn" class="bg-green-300 font-semibold hover:font-bold hover:bg-green-500 text-green-800 uppercase text-sm mx-auto p-2 rounded float-right"></button>
                        </div>
                    </form>
                </ValidationObserver>

我的data方法如下：

data() {
            return {
                id: null,
                mode: 'new',
                form: {
                    name: ''
                }
            }
        },

我的提交方法是：

onSubmit() {
                axios.post('http://127.0.0.1:8000/api/admin/sidecategories', this.form)
                    .then(response => {
                        // eslint-disable-next-line no-console
                        console.log(response)

                            this.$router.push('/sidecategories/list')
                        }
                    })
                    .catch(err => {

                        if (!err.response.data.success) {
                            // eslint-disable-next-line no-console
                            console.log(err.response.data.data)
                            // { name: ['test error']}
                            this.$refs.form.setErrors(err.response.data.data)
                        }
                    })
            }

我遇到的问题是 this.$refs.form.setErrors 根本没有设置任何错误。如果我打印 err.response.data.data（来自 Laravel 后端的响应），我得到以下信息：

{{"name":["The name has already been taken."]}}

根据 vee-validate 的文档，这是 setErrors 所期望的格式。

我正在使用 vee-validate 3。

我错过了什么？

Answer 1

引用文档：

The keys of the errors object must match the provider's vid or name props and the values must be an array of strings containing the corresponding field errors.

目前您将视频设置为 "Side"，这是不正确的。我会尝试像这样更改 ValidationProvider 上的 name/vid 道具：

<ValidationProvider name="name" vid="name" rules="required" v-slot="{ errors, failedRules }">

根本没有设置 Vue vee-validate 服务器端错误

Vue vee-validate server side error not being set at all

javascript

vue.js

vue-component

vee-validate

laravel-6