根本没有设置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

引用文档：

错误对象的键必须与提供者的 vid 或名称道具匹配，并且值必须是包含相应字段错误的字符串数组。

目前您将 vid 设置为“Side”，这是不正确的。我会尝试像这样更改 ValidationProvider 上的名称/vid 道具：

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