How show server's error in vee-validate with different name?

Question

In my vue/cli 4/vuex / bootstrap-vue project / "vue-router": "^3.1.3" / "vee-validate": "^3.2.1" / "vue-resource": "^1.5.1",project I use backend rest for saving data and I have a problem that getting errors from server like

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

I can not show it on my form as that is big form with many elements and modal form has more complicated name , not “title” and I suppose that is why server's error is not shown:

<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) {

Is there is a way to fix it ?

Ryley Ryley · Accepted Answer · 2020-02-10T16:40:20

When you call setErrors you have to have the correct field names specified. So if the server returns title but you need save_current_filter_title, you'll have to have some sort of object that keeps track of the relationship between the server's field names and the client's. For instance, on the client side, you could have this:

       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');

        });

How show server's error in vee-validate with different name?

1 Answers