Как показать ошибку сервера в vee-validate с другим именем? - PullRequest
Новая
       5

Как показать ошибку сервера в vee-validate с другим именем?

0 голосов
/ 10 февраля 2020

В моем vue / cli 4 / vuex / bootstrap - vue project / "vue -router": "^ 3.1.3" / "vee-validate": "^ 3.2.1" / " vue -resource ":" ^ 1.5.1 ", проект Я использую бэкэнд-отдых для сохранения данных, и у меня проблема с получением ошибок от сервера, таких как 

{"message":"The given data was invalid.","errors":{"title":["The title has already been taken."]}}

. Я не могу показать это в своей форме так как это большая форма со многими элементами, а модальная форма имеет более сложное имя, а не «заголовок», и я полагаю, именно поэтому ошибка сервера не отображается: 

<b-modal id="saveCurrentFilterModal" scrollable size="lg" style="min-width: 720px !important;">

    <ValidationObserver
            ref="saveCurrentFilterModalForm"
            v-slot="{handleSubmit}"
    >

    <form ref="form" @submit.stop.prevent="handleSubmitOnSaveCurrentFilterOptionsSubmit">
        <b-form-group
                :state="nameState"
                label="Name"
                label-for="name-input"
                invalid-feedback="Name is required"
        >
            <ValidationProvider
                    name="save_current_filter_title" // MORE COMPLICATED TITLE NAMW!
                    rules="required|max:100"
                    v-slot="{ errors }"
            >
                <b-form-input
                        id="save_current_filter_title"
                        v-model="save_current_filter_title"
                        placeholder="Edit saved filter title"
                        autocomplete="off"
                ></b-form-input>
                <p class="validation_error">{{ clearErrorMessage(errors[0]) }}</p>
            </ValidationProvider>
        </b-form-group>

        <b-button type="submit" size="sm" variant="outline-secondary" class="ml-4">
            <i :class="'action_link '+getHeaderIcon('save')"></i>Save
        </b-button>

    </form>
    </ValidationObserver>



    handleSubmitOnSaveCurrentFilterOptionsSubmit() {
        this.$refs.saveCurrentFilterModalForm.validate().then(success => {
            console.log('handleSubmitOnSaveCurrentFilterOptionsSu  success::')
            console.log(success)

            if (!success) {
                return;
            }

            let filters = {
                ...
            }

            let self = this
            self.$http.post(self.apiUrl + '/personal/ad-saved-filters', filters).then(({data}) => {
                console.log(data)
                self.showPopupMessage("Saved filter", 'Saved filter was successfully saved !', 'success');
                self.$bvModal.hide('saveCurrentFilterModal')
            }, error => {
                console.error(error)
                self.$refs.saveCurrentFilterModalForm.setErrors(error.body.errors);  // TO GET ERRORS FROM
                self.showPopupMessage("Saved filter", error.body.message, 'warn');

            });

        });
    },  // handleSubmitOnSaveCurrentFilterOptionsSubmit(evt) {

Есть ли способ исправить это?

1 Ответ

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

При вызове setErrors необходимо указать правильные имена полей. Поэтому, если сервер возвращает title, но вам нужно save_current_filter_title, вам понадобится какой-то объект, который отслеживает отношения между именами полей сервера и именами клиентов. Например, на стороне клиента вы могли бы иметь это: 

       let filters = {
            ...
        }

        let self = this
        self.$http.post(self.apiUrl + '/personal/ad-saved-filters', filters).then(({data}) => {
            ...
        }, error => {
           //define this in data, but for example:
           var sKey2cKey = {
               title: 'save_current_filter_title',
               name: 'complicated-client-name',
               //etc
           }, convertedErrors = {};
           Object.keys(error.body.errors).forEach((key) => {
               convertedErrors[sKey2cKey[key]] = error.body.errors[key];
           });
           self.$refs.saveCurrentFilterModalForm.setErrors(convertedErrors);  
            self.showPopupMessage("Saved filter", error.body.message, 'warn');

        });
...