javascript - 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 }">