Vue vee-validate ошибка на стороне сервера не устанавливается вообще - PullRequest
Новая
       49

Vue vee-validate ошибка на стороне сервера не устанавливается вообще

1 голос
/ 13 февраля 2020

У меня есть следующая форма: 

<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.

Что мне не хватает?

1 Ответ

2 голосов
/ 13 февраля 2020

Цитировать из документов:

Ключи объекта ошибок должны соответствовать vid или реквизитам провайдера , а значения должны быть массивом строк, содержащих соответствующие ошибки поля.

В настоящее время у вас установлено значение vid "Side", что неверно. Я бы попробовал изменить имя / VID реквизит на вашем ValidationProvider, как это: 

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