根本沒有設置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的問題是this.$refs.form.setErrors根本沒有設置任何錯誤。 如果我打印err.response.data.data （來自 Laravel 后端的響應），我會得到以下信息：

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

根據 vee-validate 的文檔，這是setErrors預期的格式。

我正在使用 vee-validate 3。

我錯過了什么？

Answer 1

引用文檔：

errors 對象的鍵必須與提供者的 vid 或 name props 匹配，並且值必須是包含相應字段錯誤的字符串數組。

目前您將 vid 設置為“Side”，這是不對的。 我會嘗試像這樣更改您的ValidationProvider上的名稱/視頻道具：

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